How to implement responsive layout that's height dependent?
hey, how would you implement a website layout whose layout is dependent/responsive on height(e.g 100vh)? For example, the content grows its size as the height of the screen grows. What unit would you use for paddings, margins, and font sizes?
9 Replies
I would use vh for everything. I would also add a minimum font size.
I was thinking the same thing. What's with that emoji @b1mind ?
Kevin made me a video for just this reason xD
Kevin Powell
YouTube
Use these instead of vh
Looking to step up your CSS game? 👉 https://kevinpowell.co/courses?utm_campaign=general&utm_source=youtube&utm_medium=viewportunits I have a bunch of courses, including several free ones.
I see people use
vh a lot, and then complain that it doesn’t work the way they thought it would, so in this one, I explore a few other options that we have,...Also I wouldn't use the fallback he did, I still go with the 100% height/min-height trick.
or a vmin/vmax #depends
Also I think its pretty much not practical to try to always match a screen size. Maybe if its just desktop it can make sense but not often. Responsive design is much more powerful, let your content be free.
as always just depends on your needs 🤷♂️
Neat. Thanks for sharing the video.
Is there a way to make the mobile address bar appear on dev tools, so I can make the layout break, like Kevin is doing in the video?
@Orchest(Ping for replies) What do you need it for?
Do you want users to scroll your page horizontally?
No there are some extensions and like BrowserSync that will but I'm not sure they are all that accurate. Its best to test on the devices and remember that Edge,Safari,FF,Chrome all do them differently xD
some have Top bars, some have bottom bars, some have both xD
Ah, I'll just check it on my phone then. This sucks. Thanks 🙂
Yes. My goal was to have a gallery of photos inside a horizontal slider, and it will automatically go to the next slide upon mouse scroll
thanks for these @b1mind , I'll check them out