Archived topic

Using the generate_media_queries filter

5 replies · Started by Ovidiu on March 9, 2020

Viewing posts 1–6 of 6

March 9, 2020 at 4:05 am #1189408

Hi,

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

March 9, 2020 at 4:27 pm #1190200

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) {
    .sidebar,
    .content-area,
    .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 :)

March 10, 2020 at 1:39 am #1190479

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. :)

March 10, 2020 at 8:29 am #1191020

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

March 10, 2020 at 10:33 am #1191163

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

March 10, 2020 at 3:22 pm #1191329

No problem :)

This archived topic is closed to new replies.

Start building better websites today.