[Resolved] Recommended way to show/hide footer widgets depending on media query?

[Torbjorn]

I have 4 different footer widgets. On a pad I’d like to hide one, on mobile, two. Is there a way to accomplish this, or rather, what way do you recommend? I can’t wrap them in the suggested div’s as far as I understand it (still new to GeneratePress, first day…) as I don’t have access to the HTML and I am not sure how a media query would look like (I can see the widgets gets the classes footer-widget-[1|2|3|4] tho) or where to put it.

Any help much appreciated.

[Leo]

Hi there,

So if you want to hide footer widget 1 on mobile, it would be this:

@media (max-width: 768px) {
    .footer-widget-1 {
        display: none;
    }
}

You can see different breakpoints here: https://docs.generatepress.com/article/responsive-display/

[Torbjorn]

Thank you so much for the quick reply.

Sorry for asking for something that you had already documented.
I should’ve spent more time searching through the docs. Oh well.

Have a great day.

[Leo]

No problem!

[Author]

Posts