Archived topic

Sidebar widget padding on tablet/mobile

3 replies · Started by Claire on October 31, 2018

Viewing posts 1–4 of 4

October 31, 2018 at 10:00 am #715731

I'm using GP Premium and the Widget Padding module. I've set the Widget Padding option as mentioned here https://docs.generatepress.com/article/widget-padding/ to 40px for all.

It looks fine on desktop, but there's a big gap between the widgets on tablet/mobile which I want to reduce.

Based on browser inspection I've tried using the following CSS, but it doesn't work. I'm still getting 40px padding all round.

@media only screen and (min-width: 768px) {
.footer-widgets, .widget-area .widget {
    padding: 20px 40px;
}
}

Is there any way to override the Customizer settings for mobile devices, or other code you can suggest?

October 31, 2018 at 2:05 pm #715918

Hi there,

Maybe give this a shot:

@media (max-width: 768px) {
    .footer-widgets, .widget-area .widget {
        padding: 20px 40px;
    }
}

Let me know if this helps :)

October 31, 2018 at 2:54 pm #715966

Thanks Leo, that worked! I think I got my min-width and max-width mixed up. ;)

October 31, 2018 at 4:39 pm #716002

No problem :)

This archived topic is closed to new replies.