Footer Mobile

[middlebeats]

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

[Moeed]

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 </body> tag

<style>
@media screen and (max-width: 767px) {
.copyright__content {
    text-align: -webkit-center !important;
}
}
</style>

RESULT:

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

Best Regards,
Moeed

[lynth]

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.

[middlebeats]

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.

[BSSCommerce-B2B]

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

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

Best Regards

[niraj_patel]

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 </body> on theme.liquid
<style>
@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;
   }
}
</style>

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

[namphan]

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;
}
}

[BrainStation23]

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 </body> tag

<style>
@media screen and (max-width: 767px) {
.copyright__content {
    text-align: -webkit-center !important;
}
}
</style>

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;
}