How can I centre footer text on mobile view?

Store Design
, , , ,

Topic summary

A user needs help centering footer text on mobile view after implementing a section from the “Section Store” app. While the desktop format works well, the footer text remains left-aligned on mobile devices.

Solutions Proposed:

  • CSS media query approach: Add custom CSS targeting footer elements with text-align: center for screens under 680px or 767px width. Code should be placed in theme.css or theme customizer.

  • theme.liquid modification: Insert code before the closing </body> tag in theme.liquid file.

Current Status:

The user successfully centered most footer content using one of the CSS solutions. However, two elements remain uncentered:

  • Submit button
  • Payment method icons

The discussion is ongoing as the user seeks additional guidance to center these remaining footer components.

Summarized with AI on November 9. AI used: claude-sonnet-4-5-20250929.
1

Hi there,

How can I centre my footer text on mobile view, I’ve implemented a section from the app “Section Store” which is perfect for my desktop format however the footer text isn’t centred. How would I go about centring it? Thanks

Store: https://beamaway.com/

Password: Dinho80

2

Add this style in theme.css or in theme customizer global style.

@media screen and (max-width: 680px){
[class*="footer-copy-text-sections-"],
[class*="footer-second-top-sections-"],
[class*="footer-second-top-item-sections-"]{
text-align: center;
}
}
3

Hi @Beamaway
Put the below code in theme.liquid before body closing tag

Hope my solution will help you resolve the issue.

Thanks!

4

Hi there! Thanks for your prompt response…I’ve plugged the code in but don’t know if its 100% correct. I’ve attached a screenshot on where I’ve plugged the code, is it correct. I’ve then dropped some screenshots below of what the footer looks like now…it hasn’t worked completely, how can I get the footer text and everything else centred? Thanks!

5

Hi @Beamaway

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.css

Step 3: Paste the below code at bottom of the file → Save

@media (max-width: 767px){
.shopify-section-group-footer-group li, p, h3 {

text-align: center !important;

}
}

Hope that my solution works for you.

Best regards,

Henry | PageFly

6

Hi @Beamaway
Please replace that css with this

It will cover most of the cases, if it still doesn’t work, Please let me know.

Thanks!

7

Perfect! Thanks Henry! Everything is centred now except the submit button and the payment methods, is there any way to centre these two parts of the footer? Thanks again:)