Changing the device breakpoints

Tom · January 19, 2021, 5:54pm

By default, GenerateBlocks uses the following media queries.

Desktop only: (min-width: 1025px)
Tablet + mobile: max-width: 1024px)
Tablet only: (max-width: 1024px) and (min-width: 768px)
Mobile: (max-width: 767px)

To change them, we can use a simple filter:

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