Responsive design, differences between media query width and actual width

Discussion in 'CSS Forum' started by BuyAnafranilOnline, Apr 10, 2013.

  1. BuyAnafranilOnline

    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?
     

Share This Page