hide widget in mobile

Hi there,

You could make use of CSS Media Queries in order to make changes to your widget for certain devices only. You can find further information on Media Queries here:

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

As an example, the following CSS contains a Media Query that targets only devices that 800px or smaller. It will hide a widget with an ID of “widget-1” from devices of that size:

@media screen and (max-width: 800px) {
    #widget-1 {
        display: none;
    }
}

If you provide a link to your site and point me to the specific widgets that you’re trying to hide, I’ll be happy to help further.

my website is infoliga.schleider.com.ar and I want to hide all widgets in mobile. I only want to show the menu and the pictorico grid.

Got you! So, using the template I gave above, you could use the following snippet to hide all widgets on devices that are px or less:

@media screen and (max-width: 800px) {
    .widget-areas {
        display: none;
    }
}

If you’d also like to hide the subscription widget at the very bottom, that CSS would become:

@media screen and (max-width: 800px) {
    .widget-areas, .jetpack_subscription_widget {
        display: none;
    }
}

You can change the max-width from 800px to any value that you’d like, to experiment with different sizes that you hide the widgets on.

Let me know how that goes.

worked, thanks!

I’m glad to hear that! Please feel free to start another thread if extra questions come up.

@dem10 if you are looking for a plugin alternative instead of using media query as @siobhyb suggested. Feel free to check this plugin : https://www.ads-software.com/plugins/widget-options/ . It has option to hide each widgets on devices. I hope you’ll love it! Thanks!

Cheers!