All topics

How do I use 100vh on an element when I'm developing?

Christiaan

27 days ago

If I stretch the viewport to auto-fit and set an element to 100vh then it takes up the entire viewport and everything below it is pushed to the bottom. If I change the viewport to something reasonable like 1920x1080 then viewport is a rectangle that only show the top but nothing below it.

How do I do this exactly?
Christiaan

27 days ago

Or if I have multiple sections and I want them all to be 100vh below eachother, then the development viewport becomes unusable 🤔
Tod

27 days ago

Great energy @Christiaan! Your continuous contribution to the toddle Community just made you advance to Community Level 2!
@Christiaan
Or if I have multiple sections and I want them all to be 100vh below eachother, then the development viewport becomes unusable 🤔
Lucas G

27 days ago

Your can scroll the preview, if that’s what you’re referring to
Lucas G

27 days ago

Also consider using min-height if you’re not already. Setting height to 100vh can easily break things on different screens
Christiaan

27 days ago

Not in the preview website, but in the editor
You have the drag handles on the side and bottom, that's the viewport right?
If I drag it down it becomes bigger and 100vh will adjust to that size, pushing any content below it outside the viewport
If I click auto-fit here, 100vh will always be that size
Which is not what happens on the preview website
Lucas G

27 days ago

No you have to 'preview' it to scroll (Press T or icon on bottom bar)
Alternatively, remove the 100vh temporarily while building.
Christiaan

27 days ago

Yeah I'm doing that but that's a bit of a drag
Cause I have to save it as 100vh for proper results, then when editing switch to something else :/
Just a point of feedback then...
Lucas G

27 days ago

Yeah I'm not sure how they could address that
Lucas G

27 days ago

The preview inside the editor is basically a realtime view of your site. It mimics a viewport so I'm not sure how they could change it to show otherwise without removing the 'real' preview
They'd have to completely change how they do the editor preview 🤔
Christiaan

27 days ago

Maybe the auto-fit can expand without affecting the viewport, so 100vh stays what it was before you pressed auto-fit
Because auto-fit is not a realistic viewport anyway
@Christiaan
Maybe the auto-fit can expand without affecting the viewport, so 100vh stays what it was before you pressed auto-fit
Lucas G

27 days ago

This would make for a good suggestion if it hasn’t been posted already
Lucas G

27 days ago

Though it’s not about it being a realistic viewport necessarily, it just assumes it’s a viewport and adjusts accordingly
For those handful of users with 8k displays 😂
Christiaan

27 days ago

Another way to do it is a variable somewhere what the max viewport height can be
You could still grow it beyond that but 100vh would stick to x pixels
But yeah, it's a bit of an odd issue
Just needs a solution because it breaks 100vh completely now :/

How do I use 100vh on an element when I'm developing?

Christiaan

Christiaan

Tod

Lucas G

Lucas G

Christiaan

Lucas G

Christiaan

Lucas G

Lucas G

Christiaan

Lucas G

Lucas G

Christiaan

Stop scrolling. Start building.

Chat with @team-toddle

Video call our CEO

Get in touch!

Product

Company

Resources

Community