Min-width media queries not firing correctly in Opera, FF and IE
I am using media queries at http://test.lovecpokladu.cz/detail-mince?id=2461 like this:
@media all and (min-width: 660px) {
... styles for box decoration ...
}
and use this view meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
When the chrome window is resized to 660px (measuring only the HTML page, not the window borders), the styles are applied correctly. Styles are not applied at 659px, which is correct.
Problem with Opera, IE and Firefox. Styles are applied in the same way as width reaches 642px :( I observe these browsers shooting at min width faster for more content even in max width mode and even on another website (built by me).
Where could the problem be?
Thank you so much!
source to share
The problem with the scrollbar width in BODY or HTML is roughly 16-18px.
What to do?
- Bad solution is to install BODY or HTML
overflow-y: scroll
. - Experimental solution - try moving the scrollbar from BODY or HTML to the first DIV wrapper.
Same:
body, html { overflow: hidden; height: 100%; }
div.wrapper { overflow: auto; height: 100%; }
source to share
I had the same problem and found a solution, at least for me. I haven't tested very much, so please let me know if there is something I don't believe.
In the media query, I am setting the min body width to the min media query width. He works!
@media only screen
and (min-width : 1060px) {
body{
min-width: 1060px;
}
#main-content{
text-align: right;
padding-left: 0;
}
}
I gave an example of this problem and solution here:
source to share