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.
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 searched, but not found what must be an obvious answer to someone who understands better than I do.
Simple problem: this page won't scroll vertically when viewed on screen wider than 768px:
http://deaconsofdeadwood.com/photos/
On screens wider than 768px, the page is stuck in this position:
I have been picking at it awhile, using firebug and experimenting. Not even going to tell you the weirdest part.
Two goals here:
Find what is wrong and a fix for the scrolling not working on screens wider than 768px.
Learn something, so I can find this kind of fix on my own.
This must be because there is no content at the side parts. Browsers don't take into account the background image's size to make the screen scrollable, only HTML contents.
I think this is causing the problem.
.section-crackbar.fixed-top {
position: fixed;
}
remove fixed position and it should scroll fine. Instead use this
.inside.clearfix {
position: fixed;
left: 20%;
}
NOTE: I'd consider giving header a better classname.
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%
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 am working on a site. The problem page in question is here:
http://bit.ly/I4YR2T
Currently I have the images in a table. I am also using Shadowbox for these images.
When I minimize the browser window in Chrome and Safari, the images scale down nicely.
However, the images are not scaling down nicely when I minimize the window in Firefox.
This page has the most images and is the most troubling, though I notice that the site as a whole does not scale down as nicely in Firefox as it does in Chrome & Safari. I have not yet checked IE.
I know this must be due to some shoddy CSS on my part.
Can anyone guide me on how to resolve this problem?
Thank you so much!
see this answer "Max-width does not apply to inline elements so you will get inconsistent behaviour cross browser...you may achieve it if you set div img { display:block } and then align the img... tags with floats instead of standard inline." That probably means getting rid of your table or setting the table cells to display as block.
Had same problem with Firefox. I got it to work in Chrome but Firefox wouldn’t display the code. So here is what I did:
/* begin HeaderObject */
.banner-img {
display: block;
margin: 0 auto;
max-width: 99%;
left: 50%;
}
/* end HeaderObject */
I changed the max-width to 99% and it displayed correctly and resized correctly. The header object was placed inside the header on the CSS, so by chance I tested to see if I could get it to work with a smaller width, as it was “nested” inside the header. Then I added the left: 50%; code because I wanted my image to display centered. Working great now.