Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Dan-Thomas Tveita
107 PointsImage full viewport width inside fixed parent div
I want to do this: http://codepen.io/Mest/pen/oKBIu
... but with an image instead of a child div. I want to target an img-class with "100vw" to always stretch to the viewport width, inside a fixed parent container.
But when replacing an img with the code above (codepen) for the "child-div", im getting a horizontal scrollbar. Im not experienced enough to really understand whats going on here.
Any ideas how to make this happen?
heres an image with the code targeting an img instead of a div, and the horisontal bar appearing as i scroll to the right. https://infinit.io/_/36rS5rV
10 Answers
Jake Lundberg
13,965 Pointsoh, sorry, i misunderstood what you were saying...you need to specify your image as a block element. so just add display: block in your css for you img. like this:
Jake Lundberg
13,965 PointsIt would be easier if we saw your code, but if I had to guess, you probably have some margin or padding or border styles included in your css for <img /> tags. So when you use 100vw, you are saying "100% of the viewport width + the margin/padding/border" which is causing you to span wider than the viewport. Again, without seeing your code I cannot be sure, but this would be my guess. Set your margin and padding to 0 for images in your css and you should be fine.
Jake Lundberg
13,965 PointsI was unable to view the second link you posted, which is why I could only guess btw.
Dan-Thomas Tveita
107 Pointsoh links not working? heres the code
html:
div class="parent-div"
img src="back.png"
/div
css:
- { box-sizing: border-box; }
.parent-div {
background: #222226;
max-width: 500px;
margin: 0 auto;
}
.parent-div img {
width: 100vw;
position: relative;
left: calc(-50vw + 50%);
}
Dan-Thomas Tveita
107 PointsI have no margins, and adding margin: 0;to my img class did not help. Im still getting a horisontal-scrollbar. Im not doin this inside a project, im doing it with the same code as inside codepen. Perhaps i should just make my own to show you :)
Dan-Thomas Tveita
107 PointsHeres a codepen of what im talking about. Not sure why i didnt just do this from the start :P the screenshot was supposed to work.
Jake Lundberg
13,965 PointsHere are the changes I made, and it worked:
http://codepen.io/iamtheWraith/pen/pJXPQY/
Hope this helps.
Dan-Thomas Tveita
107 PointsI see, but now you are not targeting an img-class with the "vw-width". You are targeting the "child-div", which leaves me with the same problem as i had from the beginning. You are basically doing the same thing as the original codepen (above).
Thank you for trying though! If I only knew why the image makes a horizontal scroll...
Jake Lundberg
13,965 PointsThe only other options I can think of would be the first one we did (where we wrapped the img in a containing element), or to move the image outside the currently parent element. Other than that, I am at a loss, unless you want to use some JS.
Dan-Thomas Tveita
107 PointsIs there a need for the horizontal scrollbar on a responsive site? Are there any obvious reasons why one shouldnt hide overflow-x?
Jake Lundberg
13,965 Pointsoff the top of my head, I can't think of any reason.
Dan-Thomas Tveita
107 PointsAlright, thanks alot Jake! Problem solved i guess, until I find a good reason not to use this method!
Dan-Thomas Tveita
107 PointsDan-Thomas Tveita
107 PointsThis fixed it, until i checked "always show scrollbars" in osx. Im sure youre aware of this (scrollbars included in vw)
So even though you fix it - im not sure i can use this method after all.
Do you know any other way to get the same effect, using another approach?
Imageclass fullwidth, even though parent containers width is fixed?