Support
Tagged: breakpoint, device sizes, media queries, screen size
HenrikZ.| Author | Posts |
|---|---|
 HenrikZ
May 10, 2020 at 3:34 pm
|
Heads up! this post was created when Microthemer was at version 6. The current version is 7. Some references to the interface may be out of date. 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 jaribisha.dk/screenshots/MT-showing-small-screen-at-720.png (this and other screenshots will be removed at a later date)) is very different from what my phone shows (see http://jaribisha.dk/screenshots/screenshot-from-phone-with-resolution-720×1512.png). On the other hand, the Beaver Builder responsive editing view (see http://jaribisha.dk/screenshots/BB-responsive-editing-phone.png) is very similar to what I see on my phone. If I reduce the width of MT to 370 px (see http://jaribisha.dk/screenshots/MT-showing-370.png) 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 |
 Sebastian
May 11, 2020 at 4:10 pm
|
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: https://buildfire.com/screen-size-resolution-importance/ 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! Cheers, |
|
HenrikZ
May 11, 2020 at 4:19 pm
|
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! |
