Canvas and Preview Mode for touch-based mobile breakpoints should be more accurate

Smaller breakpoints should reflect accurate canvas size for various devices. Currently, you can adjust the width, but you should be able to adjust the height as well.

Also, when you go to preview mode and select Tablet or Phone, hovering over elements should not show hover state since on mobile devices when you tap for the first time the hover state is shown. This will help design sites for mobile. 

  • Sergie Magdalin
  • Jan 15 2017
  • Hedwig Office commented
    28 Aug 12:00pm

    Really enjoyed this article. The styling tips are practical and easy to apply, especially the advice about choosing outerwear based on the overall outfit.
    Benson Boone Blue Jumpsuit

  • Hedwig Office commented
    28 Aug 11:59am

    Really enjoyed this article. The styling tips are practical and easy to apply, especially the advice about choosing outerwear based on the overall outfit.
    https://www.marveljacket.com/product/benson-boone-blue-jumpsuit

  • Hedwig Office commented
    28 Aug 11:59am

    Really enjoyed this article. The styling tips are practical and easy to apply, especially the advice about choosing outerwear based on the overall outfit.
    <a href="https://www.marveljacket.com/product/benson-boone-blue-jumpsuit">Benson Boone Blue Jumpsuit</a>

  • Carlos Tocchetto commented
    25 Jun 09:33pm

    I remember there was a post with a similar idea that got thousands of votes. Where is it now? It’s unbelievable it hasn’t been done yet. Finsweet had an app with that feature, but it stopped working after some major Webflow updates. If a third party app could do it, why webflow can't do it themselves? Now there’s no way around it other than to drag your screen. Frustrating.

  • Irvin Robertson commented
    24 Mar, 2025 09:59am

    This feature would greatly enhance the mobile experience on Webflow, making design previews smoother and more intuitive for touch users. A must-have for creators! Visit here to support this idea

  • Prime Jacket commented
    25 Nov, 2022 01:19pm

    Great article. Your blogs are unique and simple that is understood by anyone and it is very helpful and inspiring content good work keep it up. Leather Jackets


  • Juan Mark commented
    28 Oct, 2022 06:31pm
  • Dylan Vaughan commented
    2 Dec, 2021 03:23am

    Imagine not having to publish the site to properly see the end result! This would save so much time. I don't understand why it hasn't been added yet.

  • Guest commented
    9 Sep, 2021 11:31am

    Amazing! This can be one specific of the most valuable web journals We've actually show up across regarding this matter. Essentially Excellent. I'm likewise an expert in this subject so I can comprehend your diligent effort.Our new website has been launched and we are offering some exciting prices. Check it out now.[url=https://rjackets.com/category/mens-collection/mens-black-leather-jacket/]leather black jacket[/url]

  • Marcelo Velasquez commented
    19 Aug, 2021 04:17pm

    There is no way to see the real result of VH. This shouldn't be in the wishlist for 4 years.

  • Guest commented
    19 Mar, 2021 06:16am

    I'm glad by reading your fascinating article, also I love this Notre Dame Rudy Jacket, Keep uploading more interesting articles.


  • Meirion Williams commented
    17 Aug, 2020 10:06am

    Could you hack this in by making a 'debug' element/symbol of a horizontal line that you can place on your page - with position:fixed and then set the v-height at various positions depending on the width breakpoints? Wouldn't be exact but could give rough indication

  • Meirion Williams commented
    17 Aug, 2020 10:04am

    Should this idea be merged in?

    Add vertical height to canvas settings menu
    https://wishlist.webflow.com/ideas/WEBFLOW-I-2424

  • Meirion Williams commented
    17 Aug, 2020 10:03am

    Previewing responsive device height would be very useful. Currently it's a pain having to publish pages and then see them on a real device to get an idea for how much content can be seen on screen.

    See screenshot for Axure's simple implementation - a dashed line shows the first screen 'fold'.

    When using the responsive preview the fold line could stay pinned as you scroll the page to show what would be visible on screen.

  • Click Click commented
    26 Jun, 2019 05:57am

     I am here for the share this nice article getting windows file explorer and have to seen the all folder here.

  • Dev Design commented
    29 Apr, 2019 06:53am

    My +3 for the preview height option... would allow us designers to create a better UX

  • Maxime Duhamel commented
    10 Jul, 2018 02:09pm

    Hey guys,

    I was wishing for this as well.

    The Webflow team probably have a lot in the pipe at the moment with the e-commerce update coming soon so it might take a while before they get to this task.

     

    In the meanwhile, I made this little clonable project to help with design on different popular devices. I hope it can help.

    https://webflow.com/website/True-Responsive-Testing

     

    All my best,

    Max

  • Andre Swaby commented
    9 Feb, 2018 12:46pm

    It's a very important adjustment that should be implemented. 

    You don't know where on the screen certain elements appear as the devices differ in size and being able to adjust to have a near-accurate representation would be of great asset to minimizing errors.

  • Collin commented
    17 Jan, 2018 05:13am

    My +3 is for the preview height feature.  Preview width is great, but not actually that useful if you can't preview height as well.  We need to be able to quickly preview width / height of common device sizes.

  • Enrico Niederberger commented
    16 Jan, 2018 03:27pm

    Im also looking for height preview since I allways have to resize the browser window for checking how the content fits. really makes the work slow and unhandy...

    its actually really surprising that such a powerful tool doesn support such main feature...

  • Load older comments
  • +49