Media Queries min-width not firing correctly in Opera, FF and IE
css, firefox, media-queries, viewport, width
Solution
Problem in width of scrollbar in BODY or HTML - it about 16-18px.
What to do?
- Bad solution - set to BODY or HTML `overflow-y: scroll`.
- Experimental solution - try to move scrollbar from BODY or HTML to first wrapper DIV.
Like so:
body, html { overflow: hidden; height: 100%; }
div.wrapper { overflow: auto; height: 100%; }
Problem
I use media queries on a page http://test.lovecpokladu.cz/detail-mince?id=2461 like this: ``` @media all and (min-width: 660px) { ... styles for box decoration ... } ``` and use this meta viewport tag: ``` <meta name="viewport" content="width=device-width, initial-scale=1.0"/> ``` When I resize Chrome's window to 660px (measuring just the HTML page, not window borders), styles apply correctly. Styles don't apply in 659px, which is correct. Problem is with Opera, IE and Firefox. The styles apply as soons as width hits about 642px :( I observe these browsers firing min-width sooner at more content even in max-width condition and even on another website (built by me). Where could be the problem? Thanks a lot!