Black Friday Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[Resolved] Positioning of footer widgets on mobile

Home Forums Support Positioning of footer widgets on mobile

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #316557
    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?

    GeneratePress 1.3.46
    #316559
    Leo
    Staff
    Customer Support

    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.

    #316568
    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!

    #316569
    Leo
    Staff
    Customer Support

    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.

    #316572
    Mark

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

    #316582
    Leo
    Staff
    Customer Support

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

    #316710
    Mark

    Hi Leo,

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

    Thanks!

    #316785
    Leo
    Staff
    Customer Support

    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 🙂

    #316823
    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!

    #316862
    Leo
    Staff
    Customer Support
    #497772
    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.

    #497828
    Leo
    Staff
    Customer Support

    Hi Jessica,

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

    Thanks!

    #498054
    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.

Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.