Custom Breakpoints

Hi there,

Did you wrap the filter with the wp hook like this?

add_action( 'wp', function() {
  add_filter( 'generate_media_queries', function( $args ) {
      $args['desktop'] = '(min-width:1081px)';
      $args['tablet_only'] = '(max-width:1080)';
      $args['tablet'] = '(min-width: 811px) and (max-width: 1080px)';
      $args['mobile'] = '(max-width:810px)';
      return $args;
  } );
}, 20 );

Hi there,

that filter applies to the dynamic CSS generated by the Theme Customiser, for example the Typography settings. Primary Nav has its own breakpoint in the Customizer > Layout > Primary Nav. Blog columns and sidebar layouts generally require some CSS.

Anything content related such as blocks , those styles are not defined by GP except where there is CSS inheritance such as the aforementioned typography.

For the GenerateBlocks plugin it has its own filter eg.:

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

Hi there,

Alvind’s code should work, I just tested on my site. If it doesn’t work for you, please make sure all cache is cleared.

And yes, unfortunately we don’t offer the option to change media query in the customizer. We keep our theme light and fast by not adding everything to it, hope that’s understandable.