The need for new viewport units.
CSS has been adding new features and viewport units have been added to handle mobile devices, that now have address bars and tab bars that grow, shrink and disappear based on how you scroll the page. The vw and vh units do not see these and often bleed behind them. New units have been created for CSS to address shortcomings of the original units. Currently defined as the lvh, lvw, svh, svw, dvh, dvw units.
I would like to see these units added to Site Designer to adapt to the growing use of mobile unit browsing.
I started to play with these and made a site that points to some web pages explaining these new Viewpoint units.
The example site with the links to the links to sites explaining the new unit is
https://newcssunits.jshrimplin.com
I also used the HTML Element to add these units to the top page of this site to see how it would work. Chrome, Edge, Firefox, and Safari all use different methods of mobile address bars, but using these new units adapts well for each of these.
I used the HTML ...
<style>
.container.container-1 {
height: 100lvh;
}
@media screen and (max-width: 35rem) {
.container.container-1 {
height: 100svh;
}
}
</style>
The above replaced the hight 100vh allowed in Site Designer. The 100lvh is for the long view height above 35rem, and the 100svh is for the small view height media breakpoint below 35rem, and adapts the mobile screen for the different address and tab bars generated by the different browsers. You can rotate the screen from portrait to landscape, as each have different view ports. So check these out with different browser on your mobile device to check it out It would be great to see some of these units make it into the Site Designer program.