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%
Related
I have a web app that looks fine when rendered in Safari but the print media queries are not being respected by the browser. In Chrome the entire printable area looks fine, however in Safari it appears to be only some variation of visible content.
When scrolling down on the page the header or top area is cut off, when printing higher on the page the bottom is cut off.
I've tried the following for the print media queries (with no effect) -
Setting a min-height
Setting any variation of a height value on the container
Zooming out and printing
Changing resolution / scale
Nothing appears to have any effect at all.
Unlike Chrome, I can't find a way to debug why it is happening nor a way to debug the print styles themselves.
Note - I am using Bootstrap for styles so there are containers, rows, spans, etc... but even removing them completely and everything being on it's own line makes no difference, the same "height" of the content is shown on print.
I've had many issues with cross browser print media queries in the past. What helps a lot with regulating the visual is setting a fixed page size and html/body.
For instance:
#media print {
#page {
size: 1600px;
}
body,
html {
width: 1600px;
}
}
In my case setting body to it's original A4 width -> width: 210mm and height: 100% fixed the problem.
I've been working with modified version of PDFJS viewer from PrimeFaces
and here is a snippet that did the trick in Safari:
#page {
size: A4;
margin: 0;
}
html, body {
width: 210mm; // A4 Paper width
height: 100%;
}
note: The issue was in incorrect pdf document scaling while previewing and then printing docs. FF and Chrome were fine.
Hope it helps somebody, who uses PDFJS extension from PrimeFaces.
I've not gotten any answers on here after pointing out the issue in the comments above and mentioning it was a free bounty. Unfortunately I'd love to give the bounty away so anyone that reposts this before bounty expires can have it -
The issue was that the application I am using is a JavaScript app that runs and creates the body of the page that was only about 400px tall. After the body is rendered there is a separate bootstrap modal dialog that was being shown with the content to print and all of the CSS was good and media queries were good but the modals' content was set to larger than the body.
Upon inspection it seems that Safari (and probably other browsers) weren't taking in to account the dialogs height when calculating the height of the body.
Chrome and Firefox were fine with this because it printed all visible content but in Safari it only prints content that is as tall as the body, which in this case was about 30% of the modal. By manually triggering the body to be min-height: 1200px; it resolved the issue since that was the maximum possible height of the Bootstrap Modal dialog's content.
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 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.
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).
I realy need your help as this is driving me nuts.
On my website www.markett.nl I have 2 divs floating next to eachother.
All the browsers seem to load nicely, accapt when I view the website on the iPad the div is pushed downwards as if its wide is to large.
I have read it mayby has to do with some css padding issues, but I believe padding is not used on these div elements. I use firebug for insight in css but cant solve my problem.
I've uploaded 2 images so you can see what the probem is:
Image 1 as is loads on most browsers.
Image2 will show the problem.
You have #media queries in your CSS file for responsive layout. Find this in your CSS (around line 2640):
#media (max-width: 800px) {
/* Simplify the basic layout */
#main #content {
margin: 0 7.6%;
width: auto;
}
and remove the margin attribute from that rule. Also you don't have to test on iPad the result - you can simply change the width of your browser window.
You're using media queries to do different things depending on the width of the viewport.
If you load your site in any browser (I'm testing with Firefox, for example) and reduce the width of the window enough, the same problem happens.
To fix it, follow Zoltan Toth's instructions.