Despite needing an update to reflect the latest mobile devices, the ability to adjust viewport width in the designer is invaluable when using webflow's mobile design preview for creating mobile-specific CSS classes.
However, when trying to perfect a site design for mobile clients, it is a big limitation that the viewport height cannot also be infinitely adjusted to screen heights of popular mobile devices in the same manner.
In almost all of our site designs, I rely heavily on specifying div block and section heights as percentages of viewport height (100VH) for visual appeal, but this is obviously dramatically different to real device testing when relying on a desktop window height for designing.
While it is obviously possible to resize and drag a desktop chrome window to different sizes, this then makes the designer unusable for specifying new styles as all the designer buttons are lost in the tiny height.
Please can a new vertical sizing bar be implemented for the mobile preview with popular mobile devices marked along the pixel measurement axis in the webflow designer?
See also https://wishlist.webflow.com/ideas/WEBFLOW-I-1655 for adjustment of the desktop preview for ultra-large and high resolution displays
Admin Note:
It's currently possible to resize the height of the browser window to mimic the height of a phone screen and still access styling controls. So it's unlikely that we'll build this type of preview in the Designer at this time.
Michael Naylor
.svg){kind=logo}
It's 2024 now, 5.5 years after the feature was originally requested. We'd love to see this feature still! Resizing a browser window to see how the design looks on a particular mobile device is not a good option
We know finsweet has a snippet for this, but, come on, now with tools like framer, the UI should get priority... feels old now, and this is the peak example of why the webflow designer UI need some love.
Where is this feature?! It's 2023.
no being able to set the height of the page makes it really hard to design website in large monitor using webflow, it is literally a pain.
FYI the Finsweet Chrome Extension can handle this:
https://www.finsweet.com/extension/
Webflow, I am so surprised by your attitude towards a real problem that your users are facing. You are not even trying to understand our pain. I suppose you grown so big that it is becoming impossible to stay in touch with the needs of your clients. What a shame!
I wonder why we still don't have this feature in webflow.
Why is this not implemented yet? How are you supposed to design for mobile responsiveness when the actual viewport is 3x 4x taller than the device? Is this a joke?
F U Admin. horrible user experience coupled with horrible customer experience
This is f**** insane
How is this still not a thing? I struggle so much when designing screen-size-adjustable content (e.g. full-screen sections) because the viewport height / aspect ratio is nowhere near realistic, it's a nightmare! All of this could be fixed so easily by simply copying the chrome element inspector where you can set both height and width (!!) too anything you like!
What? Response of the admin: "It's currently possible to resize the height of the browser window to mimic the height of a phone screen....".
We need to be able to 1/ Set a locked preview height. 2/ set a locked preview width.
Every time I switch to mobile view I have to change the width from 320 to 360px and then readjust the browser window to match a size template floating in a window in a window the bkg. Its insanity.
Hey guys, you know that you can just resize the height of your browser to mimic the height of a phone screen and still access styling controls - it's just a terrible user experience and a nightmare to use efficiently.
Webflow has to start prioritizing mobile. We have the ability to adjust width breakpoints based on real devices. We should have that reflected in the device height as well so when we set sections to VH on mobile, what we see in the designer is what we get.
It's disappointing this hasn't been implemented.
Also disappointing is Webflow's Admin Note basically gaslighting users on this issue. (We know the browser window can be adjusted -- for height AND width. Duh! Obviously that's not what users are asking for here.)
This is really overdue. Would be so helpful to design for mobile first. It's the future, whether we like it or not.
It's currently possible to resize the height of the browser window to mimic the height of a phone screen and still access styling controls. So it's unlikely that we'll build this type of preview in the Designer at this time.
Are you for real? Why are legit feature requests treated like we users are all idiots?
A workflow with contantly resizing the browser window is a nightmare when qickly testing small adujustments. You realise that you also make the menus inaccecible while doing this?
Yes for real!!!! It is so hard to make a good mobile design with the stretched height preview. It doesn't turn out great on real devices when using 100VH.
Yes, PLEASE implement this! It is so annoying without height preview, basically useless in many cases!
Webflow is soooo great, everything is built so well/intuitive/smooth – so I am very surprised that you guys treat mobile as if this is like an optional add-on.
The majority of users come from mobile, as you also know for sure!
This feature is on the wishlist and heavily requested for ages (and again: SO. MUCH. NEEDED.) – So, are there any updates?
This seems like an easy thing to add.
I can already dive into my browser's inspector and add a `max-height` value to `div#workspace` and it seems to work as expected for my VH-sensitive elements. For example, this works for mobile landscape:
<div id="workspace" style="height: 100%; max-height: 320px;">But obviously it doesn't persist when changing breakpoints in the Designer, so it's not very useful.
I'm new to webflow and baffled this wasn't implemented. Not only does webflow's base size for cascading behavior make it essentially impossible to design mobile-first, but they can't even offer a mobile view with a real device height to design responsively?
Webflow feels like the future in so many ways but the disregard for mobile sets it back a decade.
YO product team: any designer who works on consumer products in 2020 should be spending 75% of their time on mobile. Design the design tool for mobile.