Re-formatting site footer for mobile

  • Unknown's avatar
    jenkse · Member ·

    Hi all,

    I am currently redesigning https://globalgator.wordpress.com/ and recently re-did the site’s footer. Although it looks good on desktop, I’ve noticed that the footer widgets overlap atop one another on mobile. Is there a way to use CSS to re-format the footer for mobile devices, so the widgets are stacked atop one another vertically rather than horizontally?

    Here is an image of what it looks like on mobile view:
    https://imgur.com/a/Gtb6OVu

    Any advice or help would be greatly appreciated!

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    aisajib · Member ·

    Hi there!

    It looks like you have some existing CSS code added to your site that may be causing this. Can you try temporarily removing the following and see if that helps? 

    .footer-widget-inner {
    display: flex;
    justify-content: center;
}
.footer-widget-inner {
    height: 200px
}

footer.site-footer {
    height: 40px
}
  • Unknown's avatar
    jenkse · Member ·

    @aisajib thank you so much for the help, it now looks great on mobile! However, I am now noticing that the footer widgets are not spaced on desktop. I noticed this before, which is why I injected the justify-content: center CSS code to center everything. Is there a way to center the widgets on desktop, but still have them vertically stacked on mobile?

    Here is a picture of how the footer currently looks on desktop: https://imgur.com/a/QSxmCNN

  • aleone89 · Staff ·

    Hey there,

    You could try also adding this CSS here: 

    
/* Even widget-width desktop AL FR */
@media screen and (min-width: 1380px) {
.footer-widget-inner .widget {
    width: 29%;
}
}

    I hope that helps. :)

  • Unknown's avatar
    jenkse · Member ·

    @aleone89 This worked perfectly! Thank you so much for the help :)

  • The topic ‘Re-formatting site footer for mobile’ is closed to new replies.