Screen height in Designer environment

Community resources General
1

Hi all! :wave:

I’m a newbie to webflow. :slightly_smiling_face:

I was wondering in the ‘designer’ environment, whether there’s anyway of placing a guide or webflow have guides to indicate the actual height of a screen in terms of it responsive screen sizes. * 1920×1080 / 1366×768 / 768x1024 / 320x480 for example.

Let me explain if your viewing your page layout in mobile view, while the width is fine 320 px the height (canvas) is long and i’m trying determine where the actual fold of the page is in terms of actual viewing area. This also applies to basically all the breakpoints Desktop, Tablet, Mobile Landscape and Mobile.

In nutshell…So you know exactly where the viewing height breaks!

Any pointers will be greatly appreciated :slight_smile:

2

There is easily handled in your browser dev tools since it can mimic various devices. See Simulate mobile devices with Device Mode - Chrome Developers

3

I usually adjust my browser height while designing. It’s not an exact pixel height as you’ve outlined but gives me a general idea. Like you mention, the phone horizontal viewport is usually when this is needed.

I use WebDev’s method on my live site.

Also, Finsweet has a Chrome extension that includes a vertical viewport adjuster:

1 Like
4

Thanks guys…really appreciate the pointers.

I’ll check those out. :+1: