Join the Webstudio community

Updated 5 months ago

in responsive design, can we adjust height of the screen apart from width to fit the average mobile

At a glance

The community members are discussing how to adjust the height of the screen, similar to how they can adjust the responsive screen width. They mention using relative viewport size units like lvh and svh instead of media queries. Some community members suggest that svh may not show the difference clearly on mobile devices, and that it would be nice to change the canvas height as well. They recommend reading up on lvh, svh, and vh, and note that keyboard height on mobile devices can also affect the screen height. The community members also mention following a related issue on GitHub.

Useful resources
can we adjust height of the screen like how we have responsive screen width on the top. as some of the screen views are distorted when viewing on screen. we need to adjust height of tablet view and mobile view.
O
c
10 comments
for this usualy people don't use breakpoints/media queries, for this people use units
there is a number of relative viewport size units
yes that was the issue, i will chek again.
svh doesnt show the difference. so cannot see how it really looks on mobile
it would be. nice to change the canvas height also, lvh and svh used. but while designing it is not visible. have to see it after it is published on a mobile and tablet.
Attachment
Screenshot_2024-08-10_at_8.42.40_AM.png
In any case this is necessary, read up on lvh, svh, vh
Keyboards on mobile devices can take different space
What we will do to help is enable faster preview
Add a reply
Sign up and join the conversation on Discord