I watched this video at 6am yesterday and my head exploded. I just spent the afternoon re-writing a significant amount of code for a project coming due, using Viewport Units to control various CSS Grid elements on a landing page. I got rid of all of the media queries I was using. So much cleaner and smarter. And best of all? It works WAY better across every viewport. I just broke singing "A Whole New World". I sang both parts.

@multifacetedperson

4 жыл бұрын

You are hilarious! Keep being awesome!

@super9studioscommercialpho370

Жыл бұрын

I love this so much, especially the part about singing both parts. HAHA!!

I am beginning to use CSS. This video was helpful. I will probably be watching all your other videos for a while. Thank you for sharing your knowledge so succinctly.

Great video, always learn new tips from you Jen. Thank you.

I've been waiting for the other shoe to drop, in the sense that I've been waiting for Jen Simmons to put out a video where I don't learn something, even about things that I think I understand. It hasn't happened yet, and I'm beginning to think this is a one-shoe operation. (I never know...in case I'm being too obtuse, that's a compliment.)

Loved your thoughts at the end of this video on the history of the edges, esp the bottom edge. On point.

The explanation is amazing. Not only on the unit, but the history and spec about the unit. I am watching every video. Subscribed!

Loving the show, keep it up.

All the videos are always great, thank you for triggering our curiosity

I was hoping you hadn't forgot your fan club . Thank you for this video!

A very useful overview - thank you!

This show is always so thoughtful and interesting. Thank you so much for it.

amazing. been watching this non stop. Pls do more and more. TQ!

Thank you, Jen! Love your videos!

This woman is a CSS goddess lol! Fantastic video, so informative 😃. This wasn't a specific tutorial. It was a glimpse of THE BIG PICTURE and she nailed it!

This is incredibly sweet tutorial, thanks indeed

Love the possibilities this opens up.

thank you ma'am, your message is straight and clear and it helps me a lot

You're just amazing! Great videos and great explanation. Keep up with good videos!

Your way of talk is so beautiful

Hello, I'm Elias Nielsen, your tutorials are very helpful.

I would like to thank Jen for another excellent video. I am creating my first landing page and I am determined to add responsive features from day one, though I waas struggling to grasp all the concepts necessary to make this happen.

Very educative! please continue . . .

Such quality with such a nice voice...

Thank you , thank you, thank you this made so much sense !

I read your book Jen. You are such a goddess on this. ❤❤❤

@edwassermann8368

Ай бұрын

Hey. What book?

i used JS before to find out the width and the height of a page, save them in variables, recalculate them if the browser gets resized and set the new height and width to the header... viewport units make everything so much more easier ^^

Thank you for helping us build a better web

Thank you, very useful.

Thank you for this useful video! I was also hoping that you would address the issue of using vh on mobile (navigation bars showing and hiding disrupt elements using vh). Maybe in a next video?

I love to use height: calc(100vh - whatever) great explanation as always!

Thank u for this awesome video

Great Stuff, thanks so much!

best channel on css

Thank you for sharing.

Thanks. Kept to minimum and no detail left behind.

thanks so much for this explanation !! :]

I hope you are well ma'am ....discovered your channel just last week, watched all of them and learnt a lot... Will wait for some new tutorials :)

Can't wait to see advanced animation techniques.

Thanks jen I'm big fan for you

Very good explanation

You're great I miss you.

I changed my whole code i had a bad thoughts about vh and vw . I was changing the font size each break with media queries. now I guess I don't need to. thanks to you

Great video. Any tips on what to do on mobile browsers where the toolbar disappears on scrolling, causing the viewport height to change? It would be nice to use CSS for this but it ends up causing the whole page to shift unpleasantly as you scroll through it

@gentlemanfinn86

6 жыл бұрын

Joseph Billingsley see this. Although not a pleasant answer. stackoverflow.com/questions/37112218/css3-100vh-not-constant-in-mobile-browser

I have a page, the content will be scaled up or down depends on screen width, by transform:scale . Can it re-coded by vh vw?

thank you a lot

Thank you :)

This is so amazing... thank you madam, Jesus bless you real.

hello there, great tip i am sure as i am not a web designer but trying to use divi themes to create one now, can we use viewport values in wordpress sites, would it be possible to see some visual examples how and where to feed these values, though it maybe is too much to ask but it will definitely help a great deal as i am breaking my head as hoe to set big images for all devices :)

how did you do it can you share with me , thank you

That was helpful

muy buen contenido sobre todo header { display: flex; height: 100vh;}

vw includes scroll bar width, shouldn't we prefer % instead?

?Great video! What's the difference between using 100vh against using percentage-based sizing - 100%

@survivelikehoneybadger

6 жыл бұрын

Shachar Zadik I think it's the height - if you set the height to 100% - it will fill all your page, but viewport takes up the size of the viewport. I think the width makes no difference if it's percents or these unita

@survivelikehoneybadger

6 жыл бұрын

kzread.info/dash/bejne/YniWraynqNunccY.html here it's also good explained

@PaulSebastianM

5 жыл бұрын

Well, first off I think, % relate to the parent container if I'm not mistaken, while v* units always relate to the viewport size, ie. browser, screen, etc.

port mean real screen size? (physical size) ?

What about in mobile devices, I want divs to have the size of the whole viewport, but is not working. Worst of all, the problem is different for each browser.

Спасибо, практически ничего не понял, но было интересно.

Which one is better viewport units or fr units in grid

@LayoutLand

6 жыл бұрын

It depends on what kind of result you want, what kind of content you have. Did you see the video on FR units? I recommend watching that next if you haven't. There's actually a 3-part series on the different kinds of units you can use.

I dislike viewport units because they effectively turn off zooming in browser. As someone who uses page zoom a lot on desktop (I am quite myopic), it bothers me a lot when I see a page poorly designed with viewport units. I've decided not to use them, but if you do, I suggest caution.

👍😁

I am the silent fan

Viewport units are not reliable on mobile devices, which means we can't use them in real life apps and websites.

@gentlemanfinn86

6 жыл бұрын

Marcin Cichocki Interesting. I had to look it up and found this stackoverflow which has a ton of information on the subject. stackoverflow.com/questions/37112218/css3-100vh-not-constant-in-mobile-browser

@kjellruben

5 жыл бұрын

You can easily change from VH or VW to px going to pads and phones. But I see your point. :)