What's the "50vw"?

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.

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.

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

Thanks Egarat!

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"