[Support request] Changing default Responsive Breakpoints

Home Forums Support Changing default Responsive Breakpoints

  • This topic has 1 reply, 2 voices, and was last updated 4 months ago by Elvin.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #1457412

    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…

    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.