[Resolved] GenratBlocks – change breakpoint for tablet globally

[Manuel]

Hi there,

is there a way to change the breakpoint for tablet in GenerateBlocks globally?
Sometimes two columns in portrait are too narrow but one column in landscape are too wide.

Thanks for your great work!

[Tom]

Hi there,

Absolutely, there’s a filter: https://github.com/tomusborne/generateblocks/blob/1.2.0/includes/functions.php#L171

So you can do this:

add_filter( 'generateblocks_media_query', function( $query ) {
    $query['tablet'] = '(max-width: 1024px)';

    return $query;
} );

That way you can make it whatever you like 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Manuel]

Hi Tom,

that’s exactly what i need. Thank a lot for the fast reply!

[Tom]

Glad I could help 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[George]

Would something like that work if I wanted to modify multiple sizes?

add_filter( 'generateblocks_media_query', function( $query ) {
    $query['desktop'] = '(min-width: 1141px)';
    $query['tablet'] = '(max-width: 1140px)';
    $query['tablet_only'] = '(max-width: 1140px) and (min-width: 768px)';
    $query['mobile'] = '(max-width: 767px)';
    return $query;
} );

[Tom]

Yep – that’s exactly right. More info here: https://community.generateblocks.com/t/changing-the-device-breakpoints/31

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[George]

Ok, for some reason, it’s not working for me, I am hiding an element on tablet and mobile but it still hides it at the default 1024px width instead of 1140px. I am using the following code throught the Code Snippets plugin but I have also tried putting it in functions.php:

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

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

The snippet is correct, right?

[Tom]

That looks good to me – is the CSS being output since using 1024px?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts