I am using bootstrap v4 to arrange my grid.
The lg option is defined as 1200px, however I see the style is still applied even at around 1000px.
The Chrome DevTool shows the css rule (and makes it disappear when I get below ~1072px).
How come the media query rule does not match the size that Chrome Dev Tools detects?
As mentioned in the comments, the issue was caused due to the page zoom level not set to 100%.
Related
I am working on a layout that needs precise media query handling. One of my issues is the crossbrowser scrollbar width as it is different according to browsers and most (all of them?) include it in the window width.
As we can see in these 2 examples, the media queries don't act at the same window size with and without the vertical scrollbar :
Test without scrollbar
Test with scrollbar
In the first example, you can see the background color change exactly at 800/700/600px window width.
In the second examples with the scrollbar the colors change at :
Chrome and firefox : 779/679/579px
IE : 783/783/583px
That makes a difference of up to 21px.
Is there is a work around by ignoring the scrollbar in media queries and focus on the available width itself.
If not how do you handle this issue, do you fix a maximum width for the scollbar and include it in the media queries?
-- UPDATE --
I am searching for best practices/solution with CSS as I would like to avoid JS for this project.
Look this example: http://stowball.github.io/mqGenie/
It is working fine both in Firefox and in Chrome for me (with scrollbars).
You can download and read more about this plugin here: https://github.com/stowball/mqGenie (~2.2 kb)
One of sources: https://stackoverflow.com/a/21414947/2898694
Enjoy.
Eight years later (2023), container queries are supported in most browsers and come to the rescue!
Instead of using a media query (which, as you found, reports a window width including the scrollbar), we declare a 'containment context' on the html element
html{container-type:inline-size;}
... and then use a container query to get it's width (without the scrollbar):
#container(max-width:600px){
body{background:gray;}
}
I've updated your example 'Test with scrollbar' using a container query approach (leaving html and javascript untouched).
I'm designing a website and I've met with an interesting problem. I've designed my font-size for different media, using syntax like this:
#media all and (max-width:1100px) {html {font-size:109%;transition:1s;}}
Everything renders and looks fine when using Chrome. Now I've tried to check it on FireFox, just to be safe and I saw, that same CSS rule is being rendered larger in one zoom level (If is click ctrl+- once then ir renders correctly, if I reset zoom to normal state - text is bigger again).
Should I be creating CSS media rules for FF exclusively or there is some standard way to make this work?
CSS reset is applied and doesn't help in this situation.
The problem was that there was no base font-size on body. So the problem was fixed by simply setting this base size equal to 100%.
Thanks to Olly Hodgson who pointed this out.
They say you have to use 'em' based media queries which helps with browser zooming issue and prevent the site from breaking.
I am using Twitter Bootstrap to make my website which is based on 'pixel' based media queries. When I zoom in the browser, my website does not break but adjust to a 'ipad' version of the website.
I'm just confused, why do I have to use em based media queries when the same effect can be done using pixel based media queries.
The em unit is based on the font-size of the element which is typography...but it makes more since when it comes to layouts IMO to use set pixel widths then set the child elements as percents based on the parent or the highest parent in the hierarchy! Leave ems for typography (they can still be useful!)
source: (pretty good stuff)
http://www.impressivewebs.com/understanding-em-units-css/
I have seen the option of loading different css files[called responsive web designing] for different screen sizes. But I want to know if there is some other way through which I can keep the CSS uniform.
I have to adjust the width of a title bar that should be of the same size as browser window with some margin-right
<toolbar width="some px value" margin-right="some px value">
I need some spacing at the end of the browser screen
Can I somehow get the current width of the browser screen and thus adjust my titlebar accordingly
"toolbar" defaults to being displayed as "inline". Try using "block". See this fiddle.
But I don't think "toolbar" is a valid html tag-name (I might be wrong). In any case old versions of Internet Explorer have a hard time figuring out what to do with certain tags (like most new semantic html5 tags) and won't apply any css to them.
If you feel the need to use new semantic tags and still need legacy browser support I recomend using Modernizr. Including it at the top of your page will use a small browser hack to get support for these tags even in old browsers.
I'm building an editor where the content of a post is loaded in a div, and jQuery selectors allow me to edit the content inline.
I just ran into a bit of a hurdle as I was trying to add some responsiveness to the styling of the templates:
in my template stylesheets, I use a specific id of the preview area to specify where the style should apply. I apply the same id to the body tag of the viewing of the post so that both the preview in the editor and the full view of the post look the same.
I was putting in some media queries on the view side of things and realized that on the preview page, something like #media screen and (max-width: 640px) will behave differently because the preview does not take up the entire width of the screen.
Is there a way I can use a media query selector other than the width of the screen, but instead the width of an element.. or something equivalent?
Or could there be another way of mimicking that behaviour simply with javascript..
Unfortunately there is not currently a way for a media query to target a div. Media queries can only target the screen, meaning the browser window, mobile device screen, TV screen, etc...
Update (2018):
This is still a common problem for many developers. There is no way without javascript to query the size of an element. It's also very difficult to implement in CSS because of the 'cyclic dependencies' it causes (element relies on another to determine its size, element query causes size change in child which causes size change in parent which causes size change in child ETC...)
There is a great summary of the current element query landscape.
The go-to solution these days is the EQCss library https://github.com/eqcss/eqcss, or handling the changes within a javascript framework like React or Vue using a "CSSinJS" type solution.
My old and hilariously janky "solution":
For now I am using:
.preview {
zoom: .8;
-moz-transform: scale(0.8);}
when the .preview div is 80% of the page width. It's generally working, but with a few issues, and it is not entirely flexible since the divs in question will not always be set % of the page width.