Using the generate_media_queries filter

[Ovidiu]

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

[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) {
    .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 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Ovidiu]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Ovidiu]

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

[Tom Lead Developer]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts