Re: How can I center the mobile footer on my Prestige theme?

Solved

How can I center the mobile footer on my Prestige theme?

ben_yamada
Shopify Partner
29 0 7

Hi!

I have been trying to center my mobile footer for some time and no code that has been given in other discussion has worked, and for some reason only the "Policies" tab in the footer is centered on mobile.

Any suggestions on what I should do?

My store URL is: eloops.jp

Thank You!

 

ben_yamada_0-1727849795506.png

 

Accepted Solutions (2)

Dan-From-Ryviu
Shopify Partner
10119 2010 2064

This is an accepted solution.

Hi @ben_yamada 

Please add this code to Custom CSS in Online Store > Themes > Customize > Theme settings

 

@media (max-width: 749px) {
.social-media--list, 
.footer__block-list { justify-content: center !important; }
}

 

Screenshot 2024-10-02 at 13.33.46.png

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Tech_Coding
Shopify Partner
386 106 90

This is an accepted solution.

Hello @ben_yamada 

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 .footer__inner {
     display: flex !important;
     justify-content: center;
    flex-direction: column;
    align-items: center;
  }
  footer .footer__block.footer__block--image{
     display: flex !important;
     justify-content: center;
  }
}
</style>

Tech_Coding_0-1727850846953.png

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

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
Shopify UI Developer
Your Coffee Tips adds a little sweetness to my day.

View solution in original post

Replies 8 (8)

Sajat
Shopify Partner
311 34 45

Hi @ben_yamada 

Welcome to Shopify Community.

To center your contents, go to Online -> Themes -> Customize

On the left side menu, select Theme Settings -> Custom CSS and add the following content

.footer{
   text-align: center !important;
}

 

This should do the trick.

 

Thank you,

Sajat

-------------------------------------------------------------------------------------------
If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.

goldi07
Excursionist
28 3 3

hello @ben_yamada 

Go to online store ----> themes ----> actions ----> edit code ---->assets ---->theme.css...> ...add the code end of the file

 

 @media screen and (max-width: 750px) { 
a.link-faded {
    text-align: center;
}
.footer__block.footer__block--links li a {
    margin: 0 auto;
    display: table;
}
}

 

ELOOPS-official-online-store--10-02-2024_12_02_PM.png
If this was helpful, hit the like button and accept the solution.
Thanks

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -Goldi184507@gmail.com - Skype: live:.cid.819bad8ddb52736c -Whatsapp: +919317950519
Checkout Some Free Sections Here

PageFly-Richard
Shopify Partner
4731 1078 1743

Hi @ben_yamada 

 

This is Richard from PageFly - Shopify Page Builder App

 

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

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

 

Hope this can help you solve the issue 

 

Best regards,

Richard | PageFly 

Please let me know if it works by giving it a Like or marking it as a solution!


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available) 


All features are available from Free plan. Live Chat Support is available 24/7.

Dan-From-Ryviu
Shopify Partner
10119 2010 2064

This is an accepted solution.

Hi @ben_yamada 

Please add this code to Custom CSS in Online Store > Themes > Customize > Theme settings

 

@media (max-width: 749px) {
.social-media--list, 
.footer__block-list { justify-content: center !important; }
}

 

Screenshot 2024-10-02 at 13.33.46.png

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

ben_yamada
Shopify Partner
29 0 7

thank you very much!

Dan-From-Ryviu
Shopify Partner
10119 2010 2064

You are very welcome! 

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Tech_Coding
Shopify Partner
386 106 90

This is an accepted solution.

Hello @ben_yamada 

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 .footer__inner {
     display: flex !important;
     justify-content: center;
    flex-direction: column;
    align-items: center;
  }
  footer .footer__block.footer__block--image{
     display: flex !important;
     justify-content: center;
  }
}
</style>

Tech_Coding_0-1727850846953.png

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

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
Shopify UI Developer
Your Coffee Tips adds a little sweetness to my day.

goldi07
Excursionist
28 3 3

hello @ben_yamada 


Go to online store ----> themes ----> actions ----> edit code ---->assets ---->theme.css...> ...add the code end of the file

 @media screen and (max-width: 750px) { 
a.link-faded {
    text-align: center;
}
.footer__block.footer__block--links li a {
    margin: 0 auto;
    display: table;
}
}

ELOOPS-official-online-store--10-02-2024_12_02_PM.png

 

If this was helpful, hit the like button and accept the solution.
Thanks

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -Goldi184507@gmail.com - Skype: live:.cid.819bad8ddb52736c -Whatsapp: +919317950519
Checkout Some Free Sections Here