[Resolved] Positioning of footer widgets on mobile

[Mark]

I am using 3 footer widgets and on mobile they are stacked on top of each other but they are positioned far left right on edge of screen. Is there a way to center these widgets when on mobile?

[Leo]

Hi Mark,

Try this CSS:

@media (max-width: 768px) {
    .footer-widgets, .lsi-social-icons {
        text-align: center !important;
    }
}

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

Let me know.

[Mark]

Thank you Leo! This works great if the footer widget is text but not if it is another object such as a Google Map or Facebook Follow Us box. How can I center the entire widget regardless of it’s contents? Is that possible?

Thank you!

[Leo]

Edited the code above a little bit. It’s a long shot but can you try it again?

If it doesn’t work any chance you can provide a link to your site? I would need to give you separate CSS for them as the content’s style is overwritten the code.

Let me know.

[Mark]

I have sent you email with the website link. Thank you!

[Leo]

I think you missed the link in your e-mail? Can you send it again? Thanks!

[Mark]

Hi Leo,

Wow I can’t believe I forgot the link. Oh well sent again

Thanks!

[Leo]

Edited the code above again: https://generatepress.com/forums/topic/positioning-of-footer-widgets-on-mobile/#post-316559

Can you give it another shot?

Then also change the Right Footer Widget Area Padding to 0 in Customizer > Layout > Footer.

Let me know if this works out 🙂

[Mark]

Ok great, that helps a bunch. Centered the Lightweight Social icons. Then I actually changed the widget area padding right and left to 20 which centered the widgets nicely and pulled them away from left side. Thank you!

[Leo]

You’re welcome 🙂

[Jessica]

I too am having a rough time with these footer widget responsive break points. At a very wide point (the 768px width), they automatically go left aligned with a HUGE gap to the right. I can’t for the life of me figure out how to keep them from doing this until it gets to the smallest media query (approx 400-500px) and trying to override the styles has proven to be unsuccessful, thus far.

It looks really odd on a tablet and even on a computer screen if you resize the window the breakpoints happen way too early and wide. They see to snap to 100% width at 768px and if you have 4 widgets that’s way too early and makes everything looks too small.

How do I override this as it’s been an issue I’ve been working on for well over a year (always creating my own custom css to handle them). This time, I’m at a loss.

Thanks.

[Leo]

Hi Jessica,

Can you open a new topic and link us to your site so we can see if we can improve it?

Thanks!

[Jessica]

@Leo: Just created a new topic w/link: https://generatepress.com/forums/topic/responsive-break-points-in-footer-widgets/

Thanks in advance for any help you can offer.

[Author]

Posts