Jump to content

CSS responsive


gongpex
 Share

Recommended Posts

Hello everyone,

 

Today I tried to create own responsive using this code:

<!DOCTYPE><style type="text/css">.test {	  margin : 0px auto;	  width:500px;	  height: 250px;	  border : 1px solid green;	  float:left;	}		.ftest {	  margin : 0px auto;	  width:500px;	  height: 250px;	  float: left;	}		@media screen (max-width: 630px){				.test {	  width:500px;	  border : 1px solid green;	}		.ftest {	margin : 0px;	width:30%;  }	}	    @media (min-width:733px) {		.test {	  width:500px;	  border : 1px solid green;	}		.ftest {	margin : 0px;	width:38%;  }	    }    @media (max-width:860px) {		.test {	  width:500px;	  border : 1px solid green;	}		.ftest {	margin : 0px;	width:30%;  }	    }			@media (max-width:650px) {		.test {	  width:500px;	  border : 1px solid green;	}		.ftest {	margin : 0px;	width:0%;  }	    }  @media (min-width:1024px) {		.test {	  width:500px;	  border : 1px solid green;	}		.ftest {	margin : 0px;	width:46%;  }	    }    @media (min-width: 1100px){		.test {	  width:500px;	  border : 1px solid green;	  margin : 0px auto;	}    .ftest {	margin : 0px;	width:500px;  }}    </style><body><div class="ftest"></div><div class="test">Responsive test!</div></body></html>

When I test this code, It can be run but the result are not soft (maybe you will understand after try my code) and @media screen (max-width: 630px) (not detect on my browser when I debug it using chrome)

 

Q : What's mistake with my code?

 

please help me

 

Thanks

Link to comment
Share on other sites

Hello @gong

 

First that i noticed is that you need to insert this into your "<head></head>" area:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

This peace of code detects mobile website sizes/etc.

 

You also need this code instead of "<!DOCTYPE>" to have HTML5 working, that i remember, not sure:

<!DOCTYPE html>

Add this peace of code RIGHT AFTER/BELOW the "<!DOCTYPE html>" code:

<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]--><!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]--><!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]--><!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->

It will help alot when you use HTML5 on your website etc :)

 

This is my own code from the "<!DOCTYPE html>" part to the "<body>" start:

<!DOCTYPE html><!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]--><!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]--><!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]--><!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]--><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><title>Hjem</title><script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript" src="js/smoothmenu.js"></script><link rel="stylesheet" href="style/base.css"><link rel="stylesheet" href="style/skeleton.css"><link rel="stylesheet" href="style/skillet.css"><link rel="stylesheet" href="style/main.css"><!--[if lt IE 9]>	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]--><link rel="shortcut icon" href="style/images/favicon.ico"></head><body>

I imagine you can get a few ideas from my own work? :)

Hope this helps, comment if not :)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...