Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML Responsive Images Image Delivery with Srcset and Sizes Adding Sizes

Paula Mourad
Paula Mourad
5,154 Points

What's the "50vw"?

Hey guys,

What did the "50vw" did? I didn't get that. Thanks!

6 Answers

Justin Goldby so why use vw (min-width) and px, when u can just use vw like u explained above.?

Paula Mourad
Paula Mourad
5,154 Points

Got it!!! :)) Thank you so much!!! :)))

Justin Goldby
seal-mask
.a{fill-rule:evenodd;}techdegree
Justin Goldby
Full Stack JavaScript Techdegree Student 12,741 Points

Paula,

When you declare "min-width" of an element on the CSS without using VW you are declaring it to have a minimum-width of 50% of that elements parent element not 50% of the current viewport, Does that make sense?

The example is that if your banner is inside a DIV that is at 800 pixels and the banner is at 200 pixels, the banner won't start downsizing until the DIV is pushed down to 400 pixels, so it will stay the same 200 pixels while other elements downsize,

With the viewport, the banner ignores what width the container DIV is and downsizes WITH the viewport.

Personally I do not like how he adds the CSS to the html here, I think it is for example purposes only.

In my experience it is always much more readable to code the CSS into the CSS file, that same CSS could be added in his CSS file, even if it means adding a class to that banner image to differentiate it from "all images." But in terms of his example, the explanation I have wrote at the beginning is why he does the viewport, to keep mobile in mind, since the screens are all different, just 50% of the parent container could come out looking odd, like it did in his example.

Justin Goldby
seal-mask
.a{fill-rule:evenodd;}techdegree
Justin Goldby
Full Stack JavaScript Techdegree Student 12,741 Points

Paula, it is so that when the current viewport is less than 1024px the banner image will always take up 50% of the viewport width. It may not look as though it changed, but it does, it scales much better when the browser is downsized. Basically he is adding another media rule to the banner.

Paula Mourad
Paula Mourad
5,154 Points

Hi Justin. Thanks for your reply.

Nick already declared on his CSS min-width: 50%; So why add this 50vw on the HTML?

Thanks! :)

Justin Goldby
seal-mask
.a{fill-rule:evenodd;}techdegree
Justin Goldby
Full Stack JavaScript Techdegree Student 12,741 Points

Yes, use the Markdown Cheatsheet above the "post answer" button - The real question here is, do you understand the difference between the viewport and a parent element or container element?

Actually after reading my example it is poor, min-width of 50% would make the banner no less than 50% of the size of its parent element, so actually if the div is 800 pixels it will be 400 and if it is sized down to 700 it will be 350 and so on. But the viewport is the browser window not the div.

Try using this link and tell me if it doesn't help you, I am not explaining this clearly enough -

Make sure to resize viewport (Browser window) to see the boxes change size.

Viewport percentage examples

Paula Mourad
Paula Mourad
5,154 Points

Hi Justin, I tried to sketch down what you're saying here (I need visuals :) How do I upload a picture that is on my desktop?

"The example is that if your banner is inside a DIV that is at 800 pixels and the banner is at 200 pixels, the banner won't start downsizing until the DIV is pushed down to 400 pixels, so it will stay the same 200 pixels while other elements downsize"