Streaming live at 10am (PST)

Designing above desktop breakpoint - best (accurate) preview?

This is more a general preview-related question. We currently work on Webflow using our 15" and 13" laptop screens. We don’t have any devices with larger screens, and now we have reached the stage of fixing up how a site looks on screens above desktop breakpoint.

We toggled the preview function in the Designer mode, but are a little concerned that the preview isn’t always showing things right. For instance, we have elements that we use vh values. When we preview in the tablet breakpoint, these values seem to be also affected by our browser height. So it doesn’t show the true look of how it shows up on a physical tablet :woman_shrugging:

We are wondering if there are any other options to preview how a site would look in breakpoints larger than desktop, given we do not have any physical screens bigger than 15"?

Thanks!

You don’t know explain to how breakpoints mean different all devices from laptop, tablet, smartphone to desktop computer? Please ignore breakpoints. Your laptop size examples; 13, 15, 17 choose. Yes, click on then preview, you can see where there is responsive size examples; 624 x 991px up to 50% - 90% improve, better, good or excellent. See two different devices from laptop to desktop. Say yes desktop 1900px - 99% and laptop 1000px, etc.

hi @skinpores working on laptop without large secondary display attached can be a bit challenging. in WF you have option to zoom out to fake bigger screens.

CleanShot 2021-05-03 at 09.34.40

But it is not ideal as WF preview doesn’t always reflect what is on page going on. To see how site will look on bigger screens you can use browser extensions as “window resizer” or in Safari developer mode that is more reliable tool. There is also a free app called `Responsively App" that simulate devices and you can add your own new screen dimensions.

That said I’m convinced that in future you will come to conclusion that buying external large monitor for laptop is the best solution with addition of real tablet and phone as you can’t relay only on simulations anyway.

m2c

Yes, a new words “Responsively App”! They many different all devices and screen sizes. What is the browsers Safari, Mozilla, Google, Microsoft Edge, any.