full width footer widget on mobile

[Matt]

Hi
I had full width footer widgets working on mobile before recent update but now they are not.
i was using div class=”ignore-xy-spacing” in the actual widget box. but does not seem to be working now
thanks
Matt

[Leo]

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?

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

[Matt]

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

[Leo]

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/

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

[Tom]

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

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

[Matt]

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

[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

[Tom]

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

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

[Tom]

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%;
    }
}

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

[Matt]

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

[Tom]

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

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

[Tom]

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.

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

[Matt]

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

[Tom]

Awesome, glad I could help! 🙂

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

[Author]

Posts