Archived topic
Media Query Width Configuration
3 replies · Started by Ian on November 8, 2020
This is not specific to GP but as I only use GP for builds now, thought I would ask for some advice to see what's the best way to move forward regarding media query setups. To ensure maximum device coverages, what would you suggest to set Microthemer media queries at. Currently, MT uses these as defaults:
Large Desktop: @media (min-width: 1200px)
Desktop & Tablet: @media (min-width: 768px) and (max-width: 979px)
Tablet & Phone: @media (max-width: 767px)
Phone: @media (max-width: 480px)
And I believe GP defaults are:
@media (max-width: 768px) {
/* CSS in here for mobile only */
}
@media (min-width: 769px) and (max-width: 1024px) {
/* CSS in here for tablet only */
}
@media (min-width: 1025px) {
/* CSS in here for desktop only */
}
I wonder if anyone has tested and can shed some light on how to best adjust MT break points so make sure everything runs smoothly and in sync with GP. The biggest adjustment may be the 768px (GP mobile) vs 767px (MT tablet / phone(. Any suggestions would be great!
Hi there,
To ensure maximum device coverages, what would you suggest to set Microthemer media queries at.
So Microthemer allows you to set the breakpoint? If what if you match their breakpoint with GP's breakpoint?
If not then the best method might be to start building the site and see what issues run into.
Thanks Leo. For this next build, I have matched MicroThemer's breakpoints to match GP ones. As I begin to only use GB Blocks, how do these breakpoints integrate with the default WordPress editor breakpoints? I am referring to inside the block editor, you can use to Preview in Desktop, Tablet and Mobile and can change say, padding at specific breakpoints. Do these play nicely with GP ones?
Hi there,
GenerateBlocks 1.2 has responsive previews:
https://generateblocks.com/generateblocks-1-2-0/
All the breakpoints used are inline with the GP breakpoints.
