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).
Related
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%.
I am trying to convert a poorly designed template to a responsive design, found here:http://www.crhinc.com/about-mobile.html
Im having an issue where on desktop browser sized to mobile the template looks and works great, but on android and iphone, the page is larger than the viewport. i know i must be missing something, but as you can see, i have outlined the elements just to get try and see if i can find out whats in there that is stretching it outside the viewport and cause mobile phones to scroll from side to side but not desktop browsers.
i set the body up for 300px width just to see if i could find the rogue element, but put it back because it did not work. there are a few tables in the content, but all set to 100% width.
for some reason, it almost looks like the width in the desktop and on mobiles or not actually the same.
Jeff
Do you actually think it is the viewport? Do you have the viewport set with the right content?
Maybe this link could help.
Or is it just the CSS? In that case I would recommand you searching for width and such. Trying to find big numbers..
Setting a specified width should be for specified screen sizes. Otherwise make it max-width.
I am working on my first website and I encountered a problem with the responsiveness of the fields in my search form. I use Wordpress theme and plug-ins and I am overriding their styles with my own.
The field groups for "Price"and "Build-Up Area" don't behave as expected when I change the size of the browser window. I created media queries for every browser size which breaks the structure, but it seems that I need about 10 separate queries, even more, which I consider as inappropriate.
(e.g. I have a query for max-width 780px and then it appears that I have to create another one for max-width 767px, because for that browser size the structure is broken again) .
I have red the original CSS code of the theme/plug-in, but I can't understand where the problem comes from.
What am I doing wrong?
Thank you in advance!
my website
Dont write css as per window size. Set the width in % for all screensize. For mobile, show the input field as one by one width as 100%.
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.