gongpex Posted December 2, 2014 Share Posted December 2, 2014 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 More sharing options...
rootKID Posted December 3, 2014 Share Posted December 3, 2014 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now