First of all I have no wrapper for the site. All the main divs have a min-width of 960px.
I wanted to give the site some left and right padding - mainly for ipad/tablets. So I gave #head, #main, #foot-inner, #foot-nav all padding: 0 20px;
But doing this made the #foot have a 20px (or 40px) right white blank area on my ipad. The #foot div is just set at default to block and repeats the blue background image. For the life of me I couldn’t figure out what was going on. Then I added min-width:1000px to the #foot and it fixed it. Note adding padding: 0 20px to the #foot did not fix it - only min-width 1000px.
Is this standard behavior? Or is the ipad messing up? Cuz it doesn’t make sense to me!
Is there any particular reason you aren’t allowing your design to be responsive? You don’t use the meta viewport. I think what’s happening is that your site is now squished and content is flowing outside of the container, which is wehre you see the white space. The padding made it so you had less room to work with probably. But the min-width gave the content more room to breathe.
That’s the same effect you would see if you reduce the desktop width to 960px and then scroll right to see the content and there will be no background on the right of the footer.
Without the min-width #foot just gets smaller and smaller even though the inner element is 960px width and the background on #foot is effectively 100% wide which is viewport wide only. If you have to scroll right you will see no background.
When the ipad scales the page (it assumes 960px and scales from there) it sees that #foot is smaller than the rest of the page and makes it stay that size relative to the other elements. When you add min-width then #foot becomes the same size as the inner elements and does not get smaller than them.
Whenever you have a background image on a widthless element you must add a min-width that equals the largest fixed width element on the page. That is true for both desktop and mobile. Otherwise the background just gets smaller and smaller with the viewport and if you need to scroll right there will be no background.
Huh thanks! Sounds like I used the correct fix then. I still don’t understand why it doesn’t go 100% wide though. It’s width 100% essentially. But I have seen this mentioned a million times herein just never experienced it in this way before I guess.
So you mention meta viewport. What will this do to the site? Going to test it now. Aside from whatever it does I beleive it has the added benifit of making Google think your site is somewhat responsive. Apparently that gives you google brownie points.
Mobile devices and what not shrink down the webpage to make it fit on their device. So even if you HAD mobile media queries, it wouldn’t get used since a 2000px site would just be scaled down to fit on the 300px mobile screen. Not good.
The meta query will make the iPad / mobile phones (whatever) recognize that the site needs to be displayed on it’s default resolution. What I mean is, a mobile phone that normally has a 300px wide screen will dispaly your site as if it’s 300px wide. So that’s when media queries come into play.
That meta above is what Google suggests. I just tested it. All it does is scale the site back even more - aka make things zoomed out and appear smaller. I’ll read on it more. Yes my site is not respojsive to device sizes. I hate hate having to deal with mobile redirects and what not all day long. Why do I want a dumbed down version? Yes the better way is the same site that adjusts automatically to viewport size. Maybe some day I’ll do it. However I am fairly positive it shows just fine on the fablets of today. Androids are all at least 5 inches. iphone 6 plus at 5.5. Those are basically mini laptops.
Your site is still 960px wide so the mobile is still trying to get it all squeezed in. That’s why it’s so zoomed out. Making yoru site work well on 300px (or making it fluid at least) would result in mobile devices not attempting to scale back your 960px and zoom out.
If you have no plans to make it responsive then by all means leave it out. It’s entirely your call.
Essentially this has nothing to do with mobile as desktops have the same behavior.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
div {
background:red;
padding:10px;
}
p {
margin:0;
width:980px;
background:rgba(50,50,50,0.5);
}
</style>
</head>
<body>
<div>
<p>This inner element is 980px wide</p>
</div>
</body>
</html>
Close the page until you get a scrollbar and then scroll to the right and you will see that the red background no longer wraps around the content. The red background is only 100% wide which means 100% and not 100% + scrolling. It doesn’t mean 100% of its content.
This is one of the first things I learned many many years ago and when you have a background around fixed width content then the background element must nave a min-width equal to the largest fixed element it contains otherwise when you scroll right you will see no background.
The ipad assumes 960px (or 980px I can’t remember exactly but it doesn’t really matter) so if you close your browser window to 960px you will see that your layout doesn’t fit. The only element that fits is the red background in my example and the rest of the layout sticks out of the side. The ipad will then scale the layout smaller and smaller until it fits in the viewport without a scrollbar so everything gets scaled smaller including the already smaller red background. What the ipad sees is what the page looks like with the bit sticking out the side with no background and that’s exactly what you get.
This is what the desktop looks like and you can see that 100% means only 100% and not wrap all around the content.
OK viewing on my mac it makes sense to me now. Thanks Paul! Its the exact same thing as if you set a div to width 100%. You get 100% and no more. That I’ve seen. But not a div at default. Threw me I guess.
