Adjustable Screen Height in Mobile Designer View

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
  • Dec 8 2018
  • Peter C Johnsen commented
    25 Mar 11:29pm

    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

  • Oscar Dykeman commented
    25 May, 2023 08:17pm

    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.

  • Aaron Clark commented
    27 Apr, 2023 05:27pm

    Where is this feature?! It's 2023.

  • Carlos Tocchetto commented
    28 Nov, 2022 09:59pm

    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.

  • Emmett Armstrong commented
    17 Nov, 2022 06:20pm

    FYI the Finsweet Chrome Extension can handle this:

    https://www.finsweet.com/extension/

  • Sorin Cadar commented
    26 Jun, 2022 02:16pm

    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!

  • Carlos Tocchetto commented
    14 Jun, 2022 10:33pm

    I wonder why we still don't have this feature in webflow.

  • One Creative commented
    9 Jun, 2022 12:07pm

    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?

  • Amanda Wan commented
    9 Jun, 2022 03:59am

    F U Admin. horrible user experience coupled with horrible customer experience

  • Hello commented
    7 Jun, 2022 12:26am

    This is f**** insane

  • Jan Wassenich commented
    13 May, 2022 04:24pm

    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!

  • John commented
    1 Apr, 2022 12:49pm

    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.

  • Miles Mitchell commented
    3 Mar, 2022 05:31pm

    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.

  • Shulem Deen commented
    17 Feb, 2022 08:33pm

    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.)

  • Pablo Trautwein commented
    10 Jan, 2022 11:04pm

    This is really overdue. Would be so helpful to design for mobile first. It's the future, whether we like it or not.

  • Sascha Patrick Geisler commented
    16 Aug, 2021 01:54pm

    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?

  • Ada commented
    9 Jul, 2021 10:50am

    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.

  • Manuel Engler commented
    7 Dec, 2020 10:40am

    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?

  • Ben Drechsel commented
    18 Aug, 2020 11:52pm

    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.

  • Jake Doering commented
    30 Jun, 2020 03:02am

    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.

  • Load older comments
  • +82