Media query does not work on mobile devices
Question
I am using Chrome and Window Resizer by ionut botizan v 1.9.1.2
I am using atom open source editor, although I initially created the page in phpstorm
My problem
I am able to click the window resize button and the page will resize upto ipad, when I try to resize mobile versions, high end windows phone, iphone and low end windows phone the browser window remains the size of the ipad coefficents 1024 x 768 and only some page elements will allow me to adjust its width, I can change other properties, ie color,background etc. however the width of header, banner and left_right_content,wont budge, adjust in size this also cause the effect of being able to scroll to the right
I have tried other sites i have made and the plugin works fine, and I have also tested a live website, and that seems to work, theres is something in this code stopping resizing, maybe some one will notice where something I missed, any help welcome
<head>
<meta charset= "utf-8">
<meta name="descripton" content="kids at play"/>
<meta name= "keywords" content="kids, club, play, learn"/>
<meta name="robots" content=index,follow/>
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="initial-scale=1.0">
<base href="http://localhost/Kids Club/Kids_Club.html"/>
<link rel="stylesheet" href="Kids_Club.css" type="text/css"/>
<title>html_5</title>
</head>
<body>
<div id="wrapper">
<div id="header"><img id ="img_header" src="jpg/kids_club_header.jpg" alt="kids club"/>
</div>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Playgroups</a>
<ul>
<li><a href="#">Under Fives</a></li>
<li><a href="#">Under Tens</a></li>
<li><a href="#">The Teens</a>
</ul>
</li>
<li><a href="#">Play & Learn</a>
<ul>
<li><a href="#">Field Trips</a></li>
<li><a href="#">Tutor Groups</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
<div id="banner"><img id ="img_banner" src="jpg/kids.jpg" alt="kids"/>
</div>
<div id="left_col_content">
<h2 class="top_title">Bring out the tiger in you</h2>
<h3 class="top_title">Activities for the Under Fives and Tens</h3>
<p>Is your little one sporty, and loves the challenge, then why not sign, him or her up for an afternoon of pure fun,
laughter and leisure at Bernie's tiger bar, where we work, rest and play all through out the day</p>
<img id ="left_column_img" src="jpg/tieger.jpg" alt="kids club"/>
<a href="" title="click me">more info</a>
</div>
<div id="right_col_content">
<h2 class="top_title">Play and Learn</h2>
<h3 class="top_title" >Activities for all</h3>
<p>Life is all about balance, and as we spend time feeding our minds, it is also important that we make
time for play.Our aim is to make learning not only fun, but a foundation were we can build and grow.
</p>
<img id ="right_column_img" src="jpg/Where-Children-Learn-Play-and-Grow.jpg" alt="play and learn"/>
<a href="" title="click me">more info</a>
</div>
<div id="newsflash">
<h2>Latest news</h2>
<p>Summer camp 2016 - The amazon, with a touch of carribean, Parents and siblings welcome, more info to come</p>
</div>
<div id="left_right_content"><h2 id="activity">What's On Today</h2>
<img id="jumeirah" src="jpg/jumeirah-beach.jpg" alt="jumeirah"/>
<img id="artandcraft" src="jpg/artandcraft.jpg" alt="artandcraft"/>
</div>
<div id="footer"></div>
</div>
</body>
</html>
body{ background-color: #024378; } #wrapper{ min-width:960px; width: 75%; margin-left: auto; margin-right: auto; background-color: #e3f1f2; } #header,#img_header{ min-width: 960px; width:100%; min-height:100px; height:12.5%; } .top_title{ color: #009fc0; } nav{ min-width:640px; width: 70%; margin-left:auto; margin-right:auto; } nav ul li:hover > ul { display: block; } nav ul { background: #009fc0; padding: 0 20px; border-radius: 10px; list-style: none; position: relative; display: inline-table; } nav ul:after { content: ""; clear: both; display: block; } nav ul li { float: left; } nav ul li:hover { background: #ffffff; } nav ul li:hover a { color: #96a4a5; } nav ul li a { display: block; padding: 25px 40px; color: #ffffff; text-decoration: none; font-weight: bold; } nav ul ul li { float: none; border-top: 1px solid #6b727c; border-bottom: 1px solid #575f6a; position: relative; } nav ul ul li a { padding: 15px 40px; } nav ul ul li a:hover { background: #ffffff; } nav ul ul ul { position: absolute; left: 100%; top:0; } nav ul ul { background: #ffffff; border-radius: 0; padding: 0; position: absolute; top: 100%;display:none; } /*images or divs that span across the page use margin left and right 'auto', divs that are smaller in size and form columns within the page use set margins, i.e10px*/ #img_banner { min-width:940px; width: 100%; height: 240px; margin-left: auto; margin-right: auto; } #banner{ min-width: 940px; width: 73.4375%; height: 240px; margin-left: auto; margin-right: auto; } #left_col_content{ float:left; min-width: 420px; width:32.8125%; margin: 1%; background-color: #ffffff; color: #06acef; text-indent:10px; padding: 2%; } #right_col_content{ float:left; min-width: 420px; width:32.8125%; margin: 1%; background-color: #ffffff; color: #06acef; text-indent:10px; padding: 2%; } #left_column_img, #right_column_img{ min-width: 200px; width:15.625%; min-height: 100px; height:12.5%; margin-left: auto; margin-right: auto; } #newsflash{ clear:both; min-width: 920px; width:71.875%; min-height:50px; height:6.25%; background-color: #009fc0; margin-left: auto; margin-right: auto; color:#fff; text-indent:10px; padding: 1%; } #left_right_content{ min-width: 890px; width: 69.53%; margin: 10px auto; height:300px; background-color: #ffffff; color: #06acef; border: dashed #009fc0; padding: 2%; } #activity { border-bottom: dotted 3px #06acef; } #jumeirah{ clear: both; float: left; min-width:80px; width: 47%; padding: 10px; } #artandcraft{ clear: none; float: right; min-width:80px; width: 47%; padding: 10px; } #footer{ clear:both; min-width: 940px; width:73.4375%; min-height:50px; height:6.25%; background-color: #009fc0; margin:auto; color:#fff; text-indent:10px; } @media only screen and (min-width:0px) and (max-width:480px) { /*low end windows phone*/ } @media only screen and (min-width:481px) and (max-width:640px){ /*iphone*/ #header,#img_header{ width: 50%; } #left_col_content { width: 58%; } #right_col_content{ clear: both; width: 58%; } #newsflash{ width: 56%; } #left_right_content{ width: 58%; } } @media only screen and (min-width:641px) and (max-width:768px) { /*high windows phone*/ } @media only screen and (min-width:769px) and (max-width:1024px) { /*ipad*/ #left_col_content { width: 94%; } #right_col_content{ width: 94%; } }
2 answers
solution1
1 ACCPTED 2015-12-12 12:01:27
It's always helpful to place your code on http://jsfiddle.net to help us visualise.
I've copied your code to https://jsfiddle.net/uhds3eac/
The many min-width properties you're using should be wrapped in a media-query for only larger screen sizes :
@media screen and (min-width:920px){
#newsflash {
min-width: 920px;
}
}
It's often a good idea to start with mobile, then accomodate for larger screens with @media rules.
Note: This isn't the issue but you're missing a starting <html> tag
solution2
0 2015-12-12 11:56:16
Your min-width statements look like the culprits, try removing them.
You'll still need to tinker with the width of some parts to make it look good, but as a rule try to only use percentage values, not px .
body { background-color: #024378; } #wrapper { width: 75%; margin-left: auto; margin-right: auto; background-color: #e3f1f2; } #header, #img_header { width: 100%; min-height: 100px; height: 12.5%; } .top_title { color: #009fc0; } nav { width: 70%; margin-left: auto; margin-right: auto; } nav ul li:hover > ul { display: block; } nav ul { background: #009fc0; padding: 0 20px; border-radius: 10px; list-style: none; position: relative; display: inline-table; } nav ul:after { content: ""; clear: both; display: block; } nav ul li { float: left; } nav ul li:hover { background: #ffffff; } nav ul li:hover a { color: #96a4a5; } nav ul li a { display: block; padding: 25px 40px; color: #ffffff; text-decoration: none; font-weight: bold; } nav ul ul li { float: none; border-top: 1px solid #6b727c; border-bottom: 1px solid #575f6a; position: relative; } nav ul ul li a { padding: 15px 40px; } nav ul ul li a:hover { background: #ffffff; } nav ul ul ul { position: absolute; left: 100%; top: 0; } nav ul ul { background: #ffffff; border-radius: 0; padding: 0; position: absolute; top: 100%; display: none; } /*images or divs that span across the page use margin left and right 'auto', divs that are smaller in size and form columns within the page use set margins, i.e10px*/ #img_banner { width: 100%; height: 240px; margin-left: auto; margin-right: auto; } #banner { width: 73.4375%; height: 240px; margin-left: auto; margin-right: auto; } #left_col_content { float: left; width: 32.8125%; margin: 1%; background-color: #ffffff; color: #06acef; text-indent: 10px; padding: 2%; } #right_col_content { float: left; width: 32.8125%; margin: 1%; background-color: #ffffff; color: #06acef; text-indent: 10px; padding: 2%; } #left_column_img, #right_column_img { width: 15.625%; min-height: 100px; height: 12.5%; margin-left: auto; margin-right: auto; } #newsflash { clear: both; width: 71.875%; min-height: 50px; height: 6.25%; background-color: #009fc0; margin-left: auto; margin-right: auto; color: #fff; text-indent: 10px; padding: 1%; } #left_right_content { width: 69.53%; margin: 10px auto; height: 300px; background-color: #ffffff; color: #06acef; border: dashed #009fc0; padding: 2%; } #activity { border-bottom: dotted 3px #06acef; } #jumeirah { clear: both; float: left; width: 47%; padding: 10px; } #artandcraft { clear: none; float: right; width: 47%; padding: 10px; } #footer { clear: both; width: 73.4375%; min-height: 50px; height: 6.25%; background-color: #009fc0; margin: auto; color: #fff; text-indent: 10px; } @media only screen and (min-width: 0px) and (max-width: 480px) { /*low end windows phone*/ } @media only screen and (min-width: 481px) and (max-width: 640px) { /*iphone*/ #header, #img_header { width: 50%; } #left_col_content { width: 58%; } #right_col_content { clear: both; width: 58%; } #newsflash { width: 56%; } #left_right_content { width: 58%; } } @media only screen and (min-width: 641px) and (max-width: 768px) { /*high windows phone*/ } @media only screen and (min-width: 769px) and (max-width: 1024px) { /*ipad*/ #left_col_content { width: 94%; } #right_col_content { width: 94%; } }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="descripton" content="kids at play" /> <meta name="keywords" content="kids, club, play, learn" /> <meta name="robots" content=index,follow/> <meta name="viewport" content="width=device-width"> <meta name="viewport" content="initial-scale=1.0"> <base href="http://localhost/Kids Club/Kids_Club.html" /> <link rel="stylesheet" href="Kids_Club.css" type="text/css" /> <title>html_5</title> </head> <body> <div id="wrapper"> <div id="header"> <img id="img_header" src="jpg/kids_club_header.jpg" alt="kids club" /> </div> <nav> <ul> <li><a href="#">Home</a> </li> <li> <a href="#">Playgroups</a> <ul> <li><a href="#">Under Fives</a> </li> <li><a href="#">Under Tens</a> </li> <li><a href="#">The Teens</a> </ul> </li> <li> <a href="#">Play & Learn</a> <ul> <li><a href="#">Field Trips</a> </li> <li><a href="#">Tutor Groups</a> </li> </ul> </li> <li><a href="#">Contact Us</a> </li> </ul> </nav> <div id="banner"> <img id="img_banner" src="jpg/kids.jpg" alt="kids" /> </div> <div id="left_col_content"> <h2 class="top_title">Bring out the tiger in you</h2> <h3 class="top_title">Activities for the Under Fives and Tens</h3> <p>Is your little one sporty, and loves the challenge, then why not sign, him or her up for an afternoon of pure fun, laughter and leisure at Bernie's tiger bar, where we work, rest and play all through out the day </p> <img id="left_column_img" src="jpg/tieger.jpg" alt="kids club" /> <a href="" title="click me">more info</a> </div> <div id="right_col_content"> <h2 class="top_title">Play and Learn</h2> <h3 class="top_title">Activities for all</h3> <p>Life is all about balance, and as we spend time feeding our minds, it is also important that we make time for play.Our aim is to make learning not only fun, but a foundation were we can build and grow. </p> <img id="right_column_img" src="jpg/Where-Children-Learn-Play-and-Grow.jpg" alt="play and learn" /> <a href="" title="click me">more info</a> </div> <div id="newsflash"> <h2>Latest news</h2> <p>Summer camp 2016 - The amazon, with a touch of carribean, Parents and siblings welcome, more info to come</p> </div> <div id="left_right_content"> <h2 id="activity">What's On Today</h2> <img id="jumeirah" src="jpg/jumeirah-beach.jpg" alt="jumeirah" /> <img id="artandcraft" src="jpg/artandcraft.jpg" alt="artandcraft" /> </div> <div id="footer"></div> </div> </body> </html>
Try researching Mobile First Design to learn more.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
parseFloat does not work on mobile devices
Media query working in chrome and Firefox desktop but not in mobile devices
Does HTML's 'onclick' work on mobile devices?
Google maps project does not work on mobile devices
js onkeyup does not work on mobile devices
Javascript onclick does not work on mobile devices
function scrollPage() does not work on mobile devices
I am tring to make my page mobile responsive but it seems like media query does not work, why?
Jquery media query for 2 devices
Why does my media query not work?
Related Tags