How can I perfectly center my website footer?

Store Design

Topic summary

Issue: Footer links and subheadings were not centered on desktop or mobile.

Early attempt: A suggestion to paste code before in theme.liquid produced no visible change for the OP.

CSS approaches proposed:

  • Center specific footer elements (headings and details content) by adding text-align: center !important; in the theme’s CSS (suggested in base.css).
  • Center the entire footer block container by applying text-align: center; to the footer grid/wrapper class, and remove a right margin that caused misalignment.

Outcome: Applying text-align: center to the footer blocks wrapper fixed the centering. OP confirmed it works and was advised to increase link title weight/size for better visual balance.

Status: Original issue resolved for the OP.

Open point: Another user cannot find base.css in their theme and has no answer yet. The presence/location of the stylesheet remains unresolved in the thread.

Summarized with AI on December 31. AI used: gpt-5.
7

oh, I thought you already align center. I just take out the margin on the right, cause the reason the subtitles are not properly align in the center. To center add this code to inside the tag

.footer__blocks-wrapper.grid.grid--1-col.grid--2-col.grid--4-col-tablet.scroll-trigger.animate--slide-in {
    text-align: center;
}

And Save.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!