How to preview different device sizes/ screen sizes/ breakpoint/ media queries

Author Posts


Hi there,

I do not understand why the MT view of my mobile media query is not the same as the resolution of my phone. There must be something that I do not understand, and I am eager to understand it.

The resolution of my phone is 720×1512 (it is a Motorola Moto G7 Play).

I have defined the mobile media query as 720 (see below).

What MT displays as the mobile view (see (this and other screenshots will be removed at a later date)) is very different from what my phone shows (see×1512.png).

On the other hand, the Beaver Builder responsive editing view (see is very similar to what I see on my phone. If I reduce the width of MT to 370 px (see it is very similar to my phone and the Beaver Builder responsive editing view.

I these use the following mobile-first media queries:

— Default screen width for “All Devices” tab 720
— Tablet screen width: larger than (min-width) 752 (Site preview width / builder sync 992 px which is just before it goes into desktop) @media (min-width: 752px)
— Desktop screen width: larger than (min-width) 993. (Site preview width / builder sync 1200 px which is my defined max row width) @media (min-width: 993px)


Hey Henrik,

Screen sizes and resolutions are two different things. The number of pixels in a given screen size determines low or high resolution. This article explains things well:

The best approach with responsive design is to cater for the full range of screen sizes. Not to target individual phones, tablet, or desktop, as they all differ in size and resolution.

When using mobile-first, start with 360px on the All Devices tab, then add extra queries when the layout needs to change. Ideally you won’t have more than 5 media query tabs. Because by using fluid layouts rather than setting dimensions in fixed pixel units, your layouts will have a degree of elasticity. So they look good across a range of screen sizes until you identify a key breakpoint, when things need to change e.g. switch from one to two columns.

I hope that helps!



Hi Sebastian,

Thanks for the explanation. It makes sense. I had the feeling it had something to do with that. Now I understand more and I can act with that knowledge!

Have a nice day!

You must login or register to reply to this topic.