Join the Webstudio community

Updated 2 months ago

Vertical sizing of viewport in work area

At a glance

The community member who created the post would like a feature in VH (presumably a web design tool) that automatically relates the previewed viewer width, with a dotted line or similar to mark it. This would help when designing websites to mock the experience on different devices. The comments discuss various ideas, such as device mockups, helper lines that can be configured, and the challenges of working with elements using VH, especially when the screen depth/height is different from the design canvas. There is no explicitly marked answer, but the community members explore different solutions and the trade-offs involved.

Useful resources
It would be handy if VH would automatically relate to the previewed viewer width. With a little dotted line or something to mark it would be amazing. I've been needing this resizable height while designing my website to mock the experience on different phones and desktops.
O
C
15 comments
I think what you need is device mockups for all kinds of devices where one can choose a device and see how it would look like there
That would help, but I would still need to preview the website on the device mockup, rather than work in the actual device size.
that depends if we only make the device mockups for preview or also in editing mode
For example webflow shows device widths on canvas during editing but you can't see the hight indeed
maybe helper lines one can configure would be indeed better
There is Finsweet vertical canvas resizing for webflow, which helps but you can't see what is below the fold.
it is particular hard when I work with element using VH
I just imagined you choose from a list of devices which once you want to see and based on those devices you would see helper lines and you can check boxes for vertical and horizontal lines or both.
and you are right, having a device skin is mostly a gimmick, and woud limit what you see instead of just informing about device size
It is just that sometimes when working on webflow, it gives the width breakpoints which is great. But I work with a large screen so I've got a good screen depth and then when I test the website using chrome developer the layout look very different because webflow doesn
take in cosideration the depth
what do you mean by depth?
sorry I meant the height of the screen
I think that is what I was envisaging.
Add a reply
Sign up and join the conversation on Discord