Footer Mobile

Store Design
, , ,

Topic summary

A user seeks help centering payment method icons and copyright text in the footer on mobile devices for their Shopify store.

Multiple Solutions Proposed:

Several developers offered CSS-based fixes targeting different files:

  • theme.liquid approach: Add custom <style> tags with media queries before the </body> tag
  • base.css modification: Insert CSS targeting .footer__column--payment and .list-payment classes
  • section-footer.css edit: Add mobile-specific styles using @media screen and (max-width: 749px)

All solutions use similar CSS properties:

  • justify-content: center !important
  • margin: 0 auto !important
  • text-align: center

Current Status:

The original poster reported that initial suggestions didn’t work with their template and temporarily removed the copyright word while keeping other elements. The discussion remains open with at least 6 different code solutions provided, but no confirmed resolution. Contributors requested the poster mark helpful answers and confirm which solution worked.

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

Hi,

How can I center the payment method in the footer for the mobile version and the copyright text?

Shopify Store: https://www.fatatjewellery.com
Password: fatat

Screenshot 2024-08-07 at 8.59.04 AM.png
Screenshot 2024-08-07 at 8.59.04 AM.png754Ă—638 34.9 KB

2

Hey @middlebeats

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1723011141503.png
Moeed_0-1723011141503.png380Ă—677 22.7 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like
3

I don’t see it now on your website. Did you remove it? The simplest way is to add CSS style to the copyright container. For example:

.your-container-class {
  margin: 0 auto !important;
}

  1. Click on “Online Store”: In the left sidebar, locate and click on “Online Store.” This will take you to the themes section.

  2. Select “Themes”: Here, you’ll see your current active theme and any other themes you have installed.

  3. Click on “Customize”: To access the theme editor for your active theme, click on the “Customize” button next to the theme’s name.

  4. Locate the “Assets” folder: In the code editor, find the “Assets” folder on the left sidebar.

  5. Open the main CSS file: Look for a file named section-footer.css, or something similar. Click on it to open the CSS file for editing.

1 Like
4

Hey @lynth @Moeed ,

The two options didn’t work on my template.

And yes @lynth , I removed the copyright word but left the rest as it was. I’ll leave it like that for now until I find a solution.

5

Hi @middlebeats ,

Step 1. Go to Admin → Online store → Theme > Edit code

Step 2. Find the file base.css.
Step 3. Add this code to the end of file

.footer__column.footer__column--payment {
  margin: 0 auto!important;
}
.footer__column--payment .list.list-payment {
  justify-content: center!important;
}

You will get result like this

BSSCommerceB2B_0-1723012152981.png
BSSCommerceB2B_0-1723012152981.png519Ă—943 28.9 KB

BSSCommerceB2B_0-1723013383332.png
BSSCommerceB2B_0-1723013383332.png488Ă—944 28.2 KB

If it helps you, please like and mark it as the solution.

Best Regards

1 Like
6

Hello @middlebeats

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

@media screen and (max-width: 767px) { .footer__content-middle-main{ justify-content: center !important; } .footer__column.footer__column--copyright.min-w{ text-align: center !important; } .list-payment{ justify-content: center !important; } }

niraj_patel_0-1723012235255.png
niraj_patel_0-1723012235255.png314Ă—435 15.5 KB

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

1 Like
7

Hi @middlebeats ,

Please go to Actions > Edit code > Assets > section-footer.css file and paste this at the bottom of the file:

@media screen and (max-width: 749px) {
.footer__column--payment {
    width: 100%;
}
.footer__column--payment .list-payment {
    justify-content: center;
}
.footer__copyright {
    justify-content: center;
}
}
8

Hi @middlebeats
You can follow these step to achieve your result

Go to Online Store ->Edit code ->Theme.liquid file and then
Add bellow code in the bottom of the file above tag

Or add bellow code base. css file

.footer__column.footer__column--payment {
  margin: 0 auto!important;
}
.footer__column--payment .list.list-payment {
  justify-content: center!important;
}