I'm using the following code in order to show certain element only in big screens:
.forkit, .forkit-curtain {
display: none;
}
#media only screen and (min-width: 1400px) {
.forkit, .forkit-curtain {
display: block;
}
}
But when the screen is 1300px the element is shown and only is hidden when the width is 1250px so the media query min-width 1400px works also for screen sizes a bit lower what is a bad behaviour.
I don't know why the media query is getting a bad screen size. What is happening?
Thanks
i suspect the difference is not 50px but something closer to 20px. What's more, I suspect that it does not react the same way for all browsers. Try comparing the break points for Chrome and for Firefox. If they are off about 20px, the difference is because:
IE, Firefox and Opera follow the W3C spec of including the scrollbar width in the media query, where Webkit browsers do not.
So when you ask the browser to trigger at 1400px, it will trigger at approx 1383px in most browsers.
You can't force the browsers to treat it the same at the moment, so the best option is to modify your layout so that it is not so tightly tied to the widths in your media queries (add extra margin). With such a layout, when it triggers a few pixels early or late, it won't make as much of a difference.
Related
I have the below media query
#media only screen and (max-width: 800px) {
.class-something {
padding: 30px;
}
}
The above rule doesn't get applied for resolution 800px width. If i give the max-width as 830px(anything above this), it gets applied.
I am using web developer firefox plugin to check the app in different resolutions.
Why is it not applying the rule when i give the exact resolution? Is it a problem with the plugin i am using to test? Has anyone experienced this problem before?
Seems that in firefox the toolbars width affects the viewport width.
Disable toolbars in firefox for testing, in my case I had to disable nav and bookmarks, but when enabled nav toolbar again (to type another url) the issue wasn't present and resizing the window works as expected.
I'm having an issue with media queries. I'm using the Responsive View Tool in Firefox to view my site at 480px. But it seems to be firing at 430px and not 480px. I've no idea why.
/*
* Gird layout for devices above 480px.
*/
#media screen and (min-width: 480px) {
html {
background: red;
}
}
I have no other code or media queries so I'm wondering if this is some type of bug.
Screenshot:
You won't believe this, and I am posting this incase anyone happens to have the same problem.
At some point I had made my browser text smaller using (CMD and - on the Mac). It was breaking in the correct width but because my font size was smaller it was throwing me off. It was actually breaking in the correct place, but the Responsive Viewer wasn't displaying the width based on my font size.
If you inspect the computed witdh of the html element after setting the responsive tool to 480 you will get a value of 465. set overflow: hidden; on the html element then check again and you get 480.
Firefox takes the width of the scrollbars into account when calculating viewport width, as opposed to Chrome which overlays the scrollbars.
check your zoom, if you have zoomed in, width will be off. ctrl+0 to reset zoom to default 100%
I've noticed that the media query breakpoints get triggered differently in Chrome vs all other browswers (IE9, Chrome, Opera).
Refer to the following screenshots to help explain (please ignore the placeholder pictures). First, where the breakpoint is in chrome:
Now, let's take a look below at where the media query triggers for all other browsers. We will use Firefox as the example, but it is the same for IE9 and Opera.
The differences:
In chrome, the trigger point for the media query is at 1190px. In all other browsers, the trigger point is at 1173px. The difference is 17px.
17px is also the difference between the actual width of the browser
itself. What do I mean by that? I took a screenshot of the point before and after the media query triggers on both Chrome and Firefox. In photoshop, I kept the width of the jpg image consistent for both browsers. For some reason, the media query triggers 17px earlier in every browser except Chrome.
The actual media query CSS code:
#media (min-width: 1190px) and (max-width: 1254px) {
.visible-large {
display: inherit !important;
}
}
#media (max-width: 1189px) {
.visible-large {
display: none !important;
}
}
My question: Is there any way to get the media query to trigger at the same point in all browsers?
I think some browsers may count overflow width.
The real difference is the way chrome-based browsers consider window/document width. In chrome based browsers the right scroll bar width is not taken into account (possibly because the mobile browser has to do this - the scroll bars in mobile browsers are "virtual" and placed in front of the document, not outside of the document's width).
As far as I know, the only way to normalize the document-to-window width for media queries across browsers can only be done in javascript because of the way chrome-based browsers handle the scroll bar, which sort of negates the power media queries brought to CSS in the first place.
Apparently Chrome does not include the scrollbar width (~17px) when evaluating media queries.
IE, Firefox and Opera do count the scrollbar width as part of the viewport.
For example, assume a viewport width of 500px and a scrollbar of 17px.
The below code:
#media (min-width: 500) {
//code
}
will execute in Chrome at a viewport width of greater than or equal to 500px.
However, IE9, Firefox & Opera will execute that code at a viewport width of greather than or equal to 483px.
My Question: Is there a way to force all browsers to either include or exclude the scrollbar width to/from the viewport width when executing media queries?
IE, Firefox and Opera follow the W3C spec of including the scrollbar width in the media query, where Webkit browsers do not.
You can't force the browsers to treat it the same at the moment, so the best option is to modify your layout so that it is not so tightly tied to the widths in your media queries (add extra margin). With such a layout, when it triggers a few pixels early or late, it won't make as much of a difference.
Question: How does one use css #media to target all screens below 1024x600?
I need to tell all small monitor screens to use overflow-x:scroll.
Context: I had to use the following CSS rule on both the HTML and BODY tags:
overflow-x:hidden !important;
(Otherwise certain animations cause ugly horizontal scrollbars to appear on the page.)
But now, when viewing my site using smaller screens, it would be nice if the user could scroll the page horizontally.
I'll keep looking for a css snippet that does this, but I'm posting this because the site just went live and it's about to get hit with tons of traffic, so I need something quick.
I found answers pretty quickly (http://www.javascriptkit.com/dhtmltutors/cssmediaqueries.shtml), but I still need to figure out how to test this online.
/* CSS that's applied when the viewing area's width is 800px or less */
#media screen and (max-width: 800px){
html{
overflow-x:auto !important;
}
body{
overflow-x:auto !important;
}
}
Where does one go to test if this actually works, because testsize.com doesn't show the scrollbars (and I'm not sure if it's their limitation or my own).