When You Size the Browser Down to under 1,000 Pixels in WIDTH and THEN scroll horizontally to the right, all the containing divs keep the same width of the browser window and do not extend to the full width.
My width is 100% for the Footer and Body.
Below is an example of what I am talking about across all browsers I have tested, So I am assuming 1 Solution will fix them all
Opera 12.0
Firefox 11.0
Chrome 20.0.1132.47
Safari 5.1.1
IE 9.08
Working Sample Here : http://glustik.com/siteTemplate2012/
Any advice from an expert would be greatly appreciated.
Thanks for your Time.
As per the solution in other questions on stackoverflow: adding a min-width attribute to the divs should do the trick.
In your case I think:
min-width: 1024px;
(width: 100% only means 100% of viewport)
see also:
100% width bg images not extending on horizontal scroll
and
CSS 100% width on browser resize
Related
I currently have a website where I'd like the main body portion of the page and footer (below the header image and navigation bar) to always take up the available view space, but to expand below this if there's more content. I've been setting min-height of my container of class mainbody to a calc() function. The HTML and CSS have been tested and behave correctly in Safari and Chromium, however it fails to behave as intended on Firefox. The problem is most apparent on the Alumni page, which has no content at the moment, and also occurs on the Media page on a large enough screen . Is there anything I'm doing wrong?
100% height means 100% of the height of the content. To be honest, I don't know why it works in chromium and not in firefox.
What you need is 100% of the viewport. There are cool vw and vh units for that. (See availability.).
If you change min-height to min-height: calc(100vh - 268px) !important;, it will work.
If you want old style solution, you can google 100% height css, e.g. enter link description here
P.S.: Also fix your CSS.
Take a look at http://benoitfal.com/tess.html on an iPhone and notice how my container div is wrong... It should be 100% width of the browser.
Say your iPhone is like mine 375px wide - this is 100%. Your images are wider than 375px, so the iPhone has zoomed out to show the whole page. The container is still 100% (in my case 375px), which is why your box is only about half of the screen. If you make your image widths 100% instead of their actual size, they will shrink to fit the viewport.
Original solution for desktop:
Your box is 100% width of the browser but you've added padding of 6px to each side. Unfortunately this gets added to the width which is why it's overflowing.
Set box-sizing: border-box on the div and it will fix it.
More about box-sizing here: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
Because this isn't a fully accepted bit of CSS yet, you should use browser prefixes as per the example in the link. If you're using Compass for your SASS, you could use #include box-sizing(border-box).
A site I'm working on has a background image on the body elements that is 3000px wide. The site itself is site to 100% width and this works fine in Chrome and Firefox. You just see whatever will fit in the screen and the overflow is hidden.
When I use Safari, the site has a horizontal scroll that extends until you reach the end of the 3000px background image. If I use the inspector on Google or Safari, when you hover over 'body' or 'html', the bounding box isn't 3000px, it's the 100% width of the site. If I try to set overflow:hidden on either body or html, it doesn't fix it. I've tried to explicitly set body and HTML and to width and max-width of 100% and that doesnt work. I've tried to set no-scroll properties and that doesn't work.
Any ideas on why this would be happening only on Safari?
I'm working on this page and I'm having a issue with the DIV where sliders are. This div#home-slider has a height: 350px as you may notice and it works fine for large resolutions but since the page is responsive, when I resize the window or see the page from a tablet or smartphone a white row appears just below the sliders and it's caused by the height value since it doesn't change. Can any give me a solution for change the height or tell me if there is a CSS solution or hack for this? What would yours do in this case?
Have you tried to change the height to 100%?
I would remove the height declaration.
Here is the site in question: www.prestigedesigns.com
The problem is that my header and footer won't stretch to their assigned 100% but only on iPhone/iPad.
I've tried what I think is everything and I could really use some help? Is there anyone else that has a similar issue?
Thanks.
It's kind of a viewport issue with mobile Safari, but you can get the same effect by shrinking the width of your desktop browser window and scrolling right, you'll see your background starts dropping out.
This is because when you're setting width:100% to your #top and #header divs, you're telling them to resize to the width of the containing element, which in this case is the browser window, (or viewport). You're not telling them to resize to the content within.
Mobile Safari's default viewport width is 980px, so it uses 980px as the width of the containing element for your divs. This is why your layout, which is around 1050px, is getting its background chopped off.
You can fix this for mobile Safari by directly setting its viewport (read Apple's Docs), or by adding min-width:width of your design in pixels; to your body. Mobile Safari will use the min-width's value for setting its viewport, and it'll also keep it from happening in desktop browsers as well.
Set the viewport to adapt your page on any device.
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Set min-width:(Width of your design)px; in CSS file and this issue will be solved.
it's not assigned width: 100% the header is getting width: 1009px; same thing with the footer.
Just a hunch as I can't actually test it, but the foot element you have within footbar is set to an absolute width in pixels while the footbar is set to % - the same with your header element - try switching these to % too?