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).
Related
I've implemented the padding bottom hack by covering ALL aspect ratios ie padding-bottom: calc(~'var(--imageHeight) / var(--imageWidth) * 100%');
This works great on desktop and on most images on mobile. The images though won't always be filling 100% of the container. So i have a situation where the say X amount of padding is added to the container but on mobile, the portrait image is scaling down within the container causing a space above/below. See image
Does anyone have any advice on how to overcome this?
Why does Dev Inspector in Chrome shows width of 100% width page in different width than I have on my monitor? I have 1920x1080 monitor and in full screen I don't get 1920 but only 1519 pixels. This number changes by the zoom.
What is reason behind this? It makes hard to code style when I don't have a proper information about a width.
When you give an element a width of 100% in CSS, you’re basically saying “Make this element’s content area exactly equal to the explicit width of its parent — but only if its parent has an explicit width.” So, if you have a parent container that’s 400px wide, a child element given a width of 100% will also be 400px wide, and will still be subject to margins, paddings, and borders — on top of the 100% width setting.
Have a look here for more https://www.impressivewebs.com/width-100-percent-css/
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.
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
I'm experiencing an issue when setting a minimum width for an area. The problem is when the browser goes smaller than the min width, the background color/image set by CSS doesn't expand further than the window size. In other words if they were to scroll to the right to view all the content, the background seemingly disappears.
If the browser was 1000px wide, and my min-width is 1200px, then the 200px outside the min width area won't have the background.
Ideas?
DEMO: http://www.nickersonweb.com/demo/PMS/index.html
You're on the right track. I had this problem once as well when I was making a site that had repeating horizontal edges. The solution is to also give your parent divs <div class="banner">,<div class="body">,<div class="footer"> the css style of min-width: 1000px;. Now it will show just fine when you scroll.