Re: Footer Mobile

Footer Mobile

middlebeats
Shopify Partner
19 0 6

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

Replies 7 (7)

Moeed
Shopify Partner
5820 1582 1880

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:

Moeed_0-1723011141503.png

 

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

 

Best Regards,
Moeed

- Get a quick Shopify quote – Click here!

- Need a Shopify Specialist? Chat on WhatsApp

- Custom Design | Advanced Coding | Store Modifications


lynth
Shopify Partner
125 6 15

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.

If my tips are useful, just mark it as the solution. Cheers!
Feeling grateful? Buy me a coffee!
middlebeats
Shopify Partner
19 0 6

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
Shopify Partner
1954 562 561

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-1723013383332.png

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

Best Regards

 

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.


B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.


B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.


BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now

niraj_patel
Shopify Partner
2378 514 506

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>

niraj_patel_0-1723012235255.png

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

Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- [email protected]

namphan
Shopify Partner
1534 193 213

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;
}
}
Coffee tips fuels my dedication.
Shopify Development Service
Need help with your store? [email protected]

BrainStation23
Shopify Partner
407 60 59

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

 

Brain Station 23 PLC (Mail: [email protected])
- Was your question answered? Mark it as an Accepted Solution
- Did the solution not address your concern? We kindly request that share or mail your store URL with us this will enable us to collaborate more closely.
- Explore our Shopify public apps