Breakpoints GP-GB-WP

Hi there,

The GeneratePress Theme uses a mixture of static break points and dynamic breakpoints
The static breaks are in the main.css stylesheet and are baked in for the hide-on-* utility classes and setting the position of the Sidebar on mobile ( @ Max Width 768px ). If those need adjusting you would require custom CSS to do so,

The dynamic breaks are for cutomzier settings, such as where the mobile menu appears or where to write style for typography. These breakpoints can be adjusted if need be using the following filters for tablet, mobile and mobile menu:

add_action ('wp', function() {

    add_filter( 'generate_tablet_media_query', function( $query ) {
        return '(min-width: 992px) and (max-width: 1024px)';
    });
    add_filter( 'generate_mobile_media_query', function( $query ) {
      return '(max-width: 991px)';
    });
    add_filter( 'generate_mobile_menu_media_query', function( $query ) {
      return '(max-width: 991px)';
    });
}, 20 );

GenerateBlocks is also able to filter the default breaks:

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

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

Note that modifying these will only apply to new styles, it won’t update any existing CSS.

WordPress core doesn’t do responsive controls , some most of what its blocks do is baked into the blocks styles and the only way to overcome that would be to use CSS.

The Editor itself, we are limited in what we can do with the “preview” sizes matching actual device breakpoints too, but we do have some ideas to hijack that for better previewing when building with GenerateBlocks.

Hi there,

A lot of the GP breakpoints are hard-coded in and difficult to change now without breaking existing sites.

However, we are moving towards an ecosystem where everything is built with our blocks, so you won’t have to worry about syncing the two much longer.

As for editor previews, I agree that this needs improving. It’s definitely on our list 🙂

That’s really great to hear! Thanks so much 🙂

We’re just getting started!