[Resolved] Using the generate_media_queries filter

Home Forums Support Using the generate_media_queries filter

This topic contains 5 replies, has 2 voices, and was last updated by  Tom 2 months, 2 weeks ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #1189408



    I’m trying to change the breakpoint at which my right sidebar drops below the content area. Right now it is set at 768px (by default), which is a way too small value for my needs. From what I understand, I need to alter these values using the generate_media_queries filter (for some reason it is missing from the documentation –> filters page).

    I found a helpful snippet in this topic and I used the following code:

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

    However, it doesn’t seem to work. Any help would be much appreciated.

    Thank you


    Tom Lead Developer

    Hi there,

    Not all of our mobile CSS is controlled via that filter, unfortunately.

    In this case, you can do this:

    @media (max-width: 900px) {
        .inside-footer-widgets > div {
            float: none;
            width: 100%;
            left: 0;
            right: 0;
        .site-main {
            margin-left: 0 !important;
            margin-right: 0 !important;

    Let me know if you need more info 🙂



    Hi Tom,

    Thank you for your reply, that does exactly what I needed.

    Just out of curiosity, any chances of being able to alter these breakpoints via a filter or the customizer with a future update? I try not to rely too much on overwriting css rules and templates in my child theme.

    Thanks again. 🙂


    Tom Lead Developer

    Not likely, unfortunately. PHP isn’t able to change static CSS/media queries.



    Yeah, that makes sense. Thank you for your help.


    Tom Lead Developer
Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.