GP & GB Breakpoints

Using this snippet:

add_action( 'wp', function() {
    add_filter( 'generateblocks_media_query', function( $query ) {
        $query['desktop'] = '(min-width: 1025px)';
        $query['tablet'] = '(max-width: 1024px)';
        $query['tablet_only'] = '(max-width: 1024px) and (min-width: 768px)';
        $query['mobile'] = '(max-width: 767px)';

        return $query;
    } );
}, 20 );

Grid containers that should be 100% are still displayed as 50% / 50% at 767px. Why?

Hi Paul,

I touched on this a little here: https://generatepress.com/forums/topic/mobile-breakpoints-best-practice/#post-1305318

Themes are more complicated, as sometimes you want those mobile elements on tablets in portrait mode. For example, having content together with a sidebar at 768px isn't readable - it's not a good user experience.

Navigation can also be the same - at some point it becomes a design nightmare to have all of your menu items visible at 768px. Of course, this is an option in the theme you can adjust.

GeneratePress itself doesn't have a ton of mobile styling, but we keep it at 768px mainly for backward-compatibility reasons.

GenerateBlocks was a fresh start, so we set mobile to 767px by default: https://github.com/tomusborne/generateblocks/blob/1.3.5/includes/functions.php#L180

Grid containers that should be 100% are still displayed as 50% / 50% at 767px. Why?

If your grid items are set to display at 100% on mobile, that should kick in at 767px by default. If it's not, feel free to link me to an example and I'll take a look.

Hi Tom,

Thanks for the detailed reply. I understand why choices were made, and I agree, particularly on the issue of sidebars. On navigation, I've been working on something today where I've reduced the breakpoint by 100px - navigation is below the logo so in this instance it makes sense. I assumed retained the 768px breakpoint was for backwards compatibility.

My original problem remains though - a grid item set to be 50% on tablet is still displayed as 50% @ 767px. In the link below there's a grid I've quickly made by myself, and an info box example using a template from GenerateBlocks library. They both behave the same so maybe I'm miss understanding this, if you could take a look I'd appreciate it for clarity.

Enabling the snippet above doesn't affect this.

Thanks,
Paul.

Link stripped, added to private area.

Here's what I'm seeing at 767px: https://www.screencast.com/t/0wmbLcyIW6

And 768px: https://www.screencast.com/t/AF85Kgia

Not too sure why you'd be seeing something different - browser zoom maybe (doubtful)?

Hi Tom,

The culprit was Windows scaling by default to 300% when using my laptop without an external monitor connected. Scaling is 100% with the screen connected, and I see the same grid layout you've linked to above.

Can you tell me how I can set GP & GB to use the same breakpoints throughout? As an example, I have container padding set to 40px desktop, and 30/20/30/20px on mobile. If I add a breadcrumb trail in the after header hook with 40px right/left on desktop & tablet, but 20px padding right/left on mobile, then I have to enable the snippet above to align the breadcrumbs with the 20px right/left padding @768px.

Then I need to create a container which is 70% width (same as the default GP layout) because a sidebar won't be present. Easy done with a single grid container. But @768px the width is still 70% while on other pages where a sidebar is used, content width is 100% as set in the theme.

So on those pages as far as I can see I can have either the correct content width of 100% at 768px and breadcrumbs not aligned, or vice-versa. Not both. Unless theme and plugin were using the same breakpoints entirely.

This has me really confused, and as much as I love GP, it's draining all my time right now.

Thanks,
Paul.

This is resolved.

Instead of using the Header Element, create a Block Element with GB: https://docs.generatepress.com/article/block-element-overview/

Way more control and no need to mess around with different media queries :)

Yeah that's what I have been doing :) I have GB breakpoints now matching GP, my only issue is when creating something like a grid of cards, I end up with huge images on tablet portrait resolutions since one grid container has to be 100% width.

Responsive dynamic backgrounds are a tough one to accomplish, but it's definitely on our radar :)