GenratBlocks - change breakpoint for tablet globally

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 :)

Hi Tom,

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

Glad I could help :)

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;
} );

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

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?

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