full width footer widget on mobile

Hi Matt,

That should still work, but I think it would make the footer widgets full width on both mobile and desktop though?

Are you able to show your site?

I will email it to you. What email would I send it to

Can you try this code to see if it works first?

@media (max-width: 768px) {
    body .inside-footer-widgets.grid-container {
      	max-width: 100%;
    }
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

This should help: https://generatepress.com/forums/topic/element-spacing/#post-269912

Hi .
No that did not work I have fixed it to look right on desktop using the:
Customizing ▸ Layout - Footer - Footer Widget Area Padding.
But for it to look the way i want it on mobile i have to set those settings to 0. What would be the @media code for those settings and i just put that in my media quires.
thanks
Matt

Sorry Tom just seen your response. I will try that but if there is a way to do it as i mentioned above that would be heaps easier and i could eliminate some unnecessary coding.
Thanks
Matt

Any chance I could see your site? Not sure why the footer widgets wouldn't be full width on mobile by default.

So first, you could do this:

@media (max-width: 768px) {
    .footer-widgets {
        padding: 0;
    }
}

Then, you have this custom CSS:

.footer-widgets .grid-33 .widget {
    padding: 0 10px;
    width: 95%;
}

You could replace it with:

@media (min-width: 769px) {
    .footer-widgets .grid-33 .widget {
        padding: 0 10px;
        width: 95%;
    }
}

Hey Thanks Tom.
Sorry for late reply.
That makes it full width but for some reason its gone to wide and the text is off to the left.

Thanks
Matt

Not sure I'm seeing what you're seeing. Can you clear your browser cache then show me a screenshot?

I think your best bet here is to just let GP handle the spacing a bit more than you are.

1. Set your footer widget padding on the left and right to 10px (or whatever) in Customize > Layout > Footer
2. Remove this CSS:

@media (min-width: 769px) {
    .footer-widgets .grid-33 .widget {
        padding: 0 10px;
        width: 95%;
    }
}

To me, that has almost an identical look and uses default GP styling so there's less quirks.

Thanks Tom
That did the trick. I had all that code in before i purchased gp premium which was confusing it..
Want to thank you for crating such a great theme and your continued support
Matt

Awesome, glad I could help! :)