Streaming live at 10am (PST)

Mobile Landscape Best Practice


I have a general question about designing in mobile landscape.

Should I assume that any device used in this breakpoint will be in landscape mode? Or are the referenced devices on the bottom pixel-size guide (Surface pro, Kindle Fire non-HD) the screen width in portrait?

Assume a common hero grid with content on left and image on right (desktop). On tablet breakpoint, it makes sense to put the image on a new grid row (in this case), but then if we are shifting from portrait orientation to landscape when the breakpoint moves one lower, it makes sense to pop the new row back to a column.

So, should I assume all devices in the “mobile landscape” breakpoint are in some sort of landscape mode where the width is greater than the height? I’m finding that it’s very difficult to design a hero that can accommodate both landscape and portrait orientations in this breakpoint.

In many of the Webflow tutorials, McGuire simply maintains his browser screen height the same the whole time. I have found it best to design for landscape mode by shrinking my browser height to make the content behave like it actually would on a device.

Read only link for reference below.

Thank you!

Here is my site Read-Only: Webflow - Cryptomi