[Support request] Changing default Responsive Breakpoints

[Anil]

The default responsive breakpoints for GP are 768px for mobile and 1024px for desktop with tablet in between.

Can I shift this easily to following:

responsive breakpoints of 768px to 700px with some css…

[Elvin]

Hi Anil,

Looking at this function, we can get an idea of how the media queries are set.:

function generate_get_media_query( $name ) {
	$desktop = apply_filters( 'generate_desktop_media_query', '(min-width:1025px)' );
	$tablet = apply_filters( 'generate_tablet_media_query', '(min-width: 769px) and (max-width: 1024px)' );
	$mobile = apply_filters( 'generate_mobile_media_query', '(max-width:768px)' );
	$mobile_menu = apply_filters( 'generate_mobile_menu_media_query', $mobile );

	$queries = apply_filters( 'generate_media_queries', array(
		'desktop' 		=> $desktop,
		'tablet' 		=> $tablet,
		'mobile' 		=> $mobile,
		'mobile-menu' 	=> $mobile_menu,
	) );

	return $queries[ $name ];
}

We can use the 'generate_media_queries' PHP filter and set ‘desktop’,’tablet’ and ‘mobile’ to what we need them to be.

Example: (the answer to your question)

add_filter( 'generate_media_queries', function( $args ) {
    $args['mobile'] = '(max-width:700px)';
    return $args;
} );

But now the problem is, this will only apply to dynamically generated CSS styles by the theme. This will not affect hard-coded static stylesheets. Static meaning, styles w/ fixed written @media (max-width:768px){...} rules.

For static stylesheets, you’ll have to overwrite them.

[Author]

Posts