How can I center footer content?

  • Unknown's avatar
    silviafoglia · Member ·

    Hi! I’m trying to center the content of my footer (social media buttons, impressum and WordPress logo) but I can’t figure out how to do that.

    When I look into Widget I already selected the Centered mode.

    Can anyone help?

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

  • Unknown's avatar
    faisalahammad · Member ·

    Hey Silvia,

    To make the text and social icons centered, please select the “Align Text Center” and “Justify Items Center” options, as shown in the following screen recording.

    Give it a try, and let me know how that goes! 😄

  • Unknown's avatar
    silviafoglia · Member ·

    thanks for your answer!

    Unfortunately it looks like I have 3 footers which are in 3 columns and when I center the icons they center in the first column on the left. I can’t find a way to only have one footer so I can center how you showed me!

  • Unknown's avatar
    faisalahammad · Member ·

    From your screenshot, it seems like you’re using the Business plan, so you can use Custom CSS.

    To resolve the issue, go to Appearance → Additional CSS and add the following code, which will resolve the issue.

    .site-footer .widget-area {
  float: none !important;
  width: 100% !important;
}

footer .site-info {
  text-align: center !important;
}

    So, the output will look like the following screenshot.

    Give it a try, and let me know how that goes! 😄

  • Unknown's avatar
    silviafoglia · Member ·

    Unfortunately I don’t have a business account!! 😭

    No other possible workaround to solve this?

  • Unknown's avatar
    parkdanil · Member ·

    Delete the extra Footers (2 and 3), then replace the Social Buttons in the remaining Footer. Next, do the Align and Justify steps again to center the contents.

  • Unknown's avatar
    faisalahammad · Member ·

    From your screenshot, I can see that you have the Additional CSS option under the Appearance tab. Have you tried adding my code there?

    Additionally, you can move all widgets/blocks under Footer 1, which should also resolve the issue.

  • Unknown's avatar
    justjennifer · Member ·

    Hi there @silviafoglia, the theme you’re using, Gateway, is one of our oldest available themes and the three widget areas in the footer section can’t be deleted as it’s integral to the theme design (this theme was created long before the site editor).

    So let me suggest an “old-timey” solution to your issue. In Appearance>Customizer, in Widgets> Footers 1 and 3, add only the Spacer Block. https://wordpress.com/support/wordpress-editor/blocks/spacer-block/ You can leave the default spacer size.

    In Widgets> Footer 2, add your social media icons and center the entire social icons widget from the toolbar above.

    For this you don’t need CSS or any upgrade. Give it a try and let us know how that goes.

  • Unknown's avatar
    silviafoglia · Member ·

    yeeeee!! It worked, thanks a lot everyone for your time and suggestions to solve this!
    So happy to have my centered footer now :)
    @justjennifer the old-timey solution worked!! Thanks!! 🙏🙏🙏

    PS: do you have a new similar theme I could use for my future website iterations?

  • Unknown's avatar
    justjennifer · Member ·

    So glad to hear that worked for you. You’re welcome. :)

    If you let us know what features you like in Gateway, we can try to suggest something.

    All of the newer Full Site Editing themes can be used out of the box, but are also near infinitely customizable. Having said that there’s a learning curve involved. :D

  • kathrynwp · Staff ·

    @silviafoglia – glad you’re set for now! I’d encourage you to explore newer block themes as Jennifer suggested, as they are much more flexible than these older ones. You can learn more about using the Site Editor when you’re ready to dive in.

    @justjennifer – thanks so much for sharing your old-timey workaround, those are sometimes just the ticket. ;)

    @faisalahammad – thanks for trying to help. While there is an Additional CSS panel present, the editor is not usable on plans below Premium, so seeing it in a screenshot isn’t an indicator of the plan someone is on.

  • The topic ‘How can I center footer content?’ is closed to new replies.