BuyAnafranilOnline
New Member
sorry if the description is too long, I'm just trying to give as much info as possible.
Recently i had an issue (i fixed it, but i dont understand why it was happening).
The problem was that when you resize the browser, for example for width 768px, the media query wasn't working. And i had to decrease the browser width for around 20-30px more, in order to work.Shortly, the 768px media query was working when the width was less than 750px for example. Here is simplified code.
HTML:\[code\]<div id="wrapper"> <header id="header"> <a href="" class="logo"> <img src="http://stackoverflow.com/questions/15915061/images/logo-wide.png" alt="logo" /> </a> <a id="menu_button" href="http://stackoverflow.com/questions/15915061/#">menu</a> <nav id="nav"> <ul id="menu"> <li><a href="" class="home">Home</a></li> <li><a href="" class="services">Services</a> ... more navidation list items </ul> </nav> </header> ... more code which is not relevant</div>\[/code\]CSS:\[code\]@media screen and (max-width: 768px) { div#wrapper { max-width:768px; margin:0 auto; } a.logo { display:block; float:left; width:80%; padding:25px 0; height:33px; } a#menu_button { width:20%; float:left; display:block; padding:50px 0 15px; height:18px; } /* menu ----------------------*/ nav, #nav { width:100%; float:left; display:none; } ul#menu ul { display:none; } ul.sub.active { display:block !important; } ul#menu li { float:none; } ul#menu a { width:100%; padding:20px 0; text-align:left; text-indent: 70px; display:block; margin-top: 1px; }}@media screen and (min-width: 769px) { div#wrapper { max-width:960px; margin:5px auto; } a.logo { display:block; float:left; padding:20px 35px; } a#menu_button { display:none; } /* menu ----------------------*/ nav, #nav { float:right; display:block; } .activemobile { display:block !important; } ul#menu li { float:left; } ul#menu a { width:90px; padding:50px 0 5px; display:block; margin: 0 0 0 2px; } ul#menu ul { display:none; position:absolute; margin-left:2px; right:0; } ul#menu li:hover ul { display:block; z-index:999; } ul#menu ul li { float:left; } ul#menu ul li a { width:80px; padding:5px; font-size:12px; margin:2px 0 0 2px; } ...}\[/code\]code that wasnt working:\[code\]ww = document.body.clientWidth;// i take this on window resize and on loadvar adjustMenu = function() { if (ww < 768) { if (!$("#nav").hasClass("active")) { $("#nav").hide(); } else { $("#nav").show(); } ...\[/code\]code that is working (i use modernizr) \[code\]var adjustMenu = function() { if (Modernizr.mq('(max-width: 768px)')) { if ($("#nav").hasClass("active")) $("#nav").show(); else $("#nav").hide();...\[/code\]Can someone tell me why there was around 20-30px gap in which the media query wasnt working?
Recently i had an issue (i fixed it, but i dont understand why it was happening).
The problem was that when you resize the browser, for example for width 768px, the media query wasn't working. And i had to decrease the browser width for around 20-30px more, in order to work.Shortly, the 768px media query was working when the width was less than 750px for example. Here is simplified code.
HTML:\[code\]<div id="wrapper"> <header id="header"> <a href="" class="logo"> <img src="http://stackoverflow.com/questions/15915061/images/logo-wide.png" alt="logo" /> </a> <a id="menu_button" href="http://stackoverflow.com/questions/15915061/#">menu</a> <nav id="nav"> <ul id="menu"> <li><a href="" class="home">Home</a></li> <li><a href="" class="services">Services</a> ... more navidation list items </ul> </nav> </header> ... more code which is not relevant</div>\[/code\]CSS:\[code\]@media screen and (max-width: 768px) { div#wrapper { max-width:768px; margin:0 auto; } a.logo { display:block; float:left; width:80%; padding:25px 0; height:33px; } a#menu_button { width:20%; float:left; display:block; padding:50px 0 15px; height:18px; } /* menu ----------------------*/ nav, #nav { width:100%; float:left; display:none; } ul#menu ul { display:none; } ul.sub.active { display:block !important; } ul#menu li { float:none; } ul#menu a { width:100%; padding:20px 0; text-align:left; text-indent: 70px; display:block; margin-top: 1px; }}@media screen and (min-width: 769px) { div#wrapper { max-width:960px; margin:5px auto; } a.logo { display:block; float:left; padding:20px 35px; } a#menu_button { display:none; } /* menu ----------------------*/ nav, #nav { float:right; display:block; } .activemobile { display:block !important; } ul#menu li { float:left; } ul#menu a { width:90px; padding:50px 0 5px; display:block; margin: 0 0 0 2px; } ul#menu ul { display:none; position:absolute; margin-left:2px; right:0; } ul#menu li:hover ul { display:block; z-index:999; } ul#menu ul li { float:left; } ul#menu ul li a { width:80px; padding:5px; font-size:12px; margin:2px 0 0 2px; } ...}\[/code\]code that wasnt working:\[code\]ww = document.body.clientWidth;// i take this on window resize and on loadvar adjustMenu = function() { if (ww < 768) { if (!$("#nav").hasClass("active")) { $("#nav").hide(); } else { $("#nav").show(); } ...\[/code\]code that is working (i use modernizr) \[code\]var adjustMenu = function() { if (Modernizr.mq('(max-width: 768px)')) { if ($("#nav").hasClass("active")) $("#nav").show(); else $("#nav").hide();...\[/code\]Can someone tell me why there was around 20-30px gap in which the media query wasnt working?