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 23:29

    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
    May 25, 2023 20:17

    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
    April 27, 2023 17:27

    Where is this feature?! It's 2023.

  • Carlos Tocchetto commented
    November 28, 2022 21:59

    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
    November 17, 2022 18:20

    FYI the Finsweet Chrome Extension can handle this:

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

  • Sorin Cadar commented
    June 26, 2022 14:16

    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
    June 14, 2022 22:33

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

  • One Creative commented
    June 09, 2022 12:07

    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
    June 09, 2022 03:59

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

  • Hello commented
    June 07, 2022 00:26

    This is f**** insane

  • Jan Wassenich commented
    May 13, 2022 16:24

    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
    April 01, 2022 12:49

    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
    March 03, 2022 17:31

    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
    February 17, 2022 20:33

    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
    January 10, 2022 23:04

    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
    August 16, 2021 13:54

    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
    July 09, 2021 10:50

    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
    December 07, 2020 10:40

    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
    August 18, 2020 23:52

    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
    June 30, 2020 03:02

    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