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

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!

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.

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

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

Hi @ben_yamada

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the 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


Hope this can help you solve the issue

Best regards,

Richard | PageFly

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

1 Like

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 on theme.liquid

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

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

1 Like

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

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

thank you very much!

1 Like

You are very welcome!

Hey there,

I tried your code on my prestige theme but it didn’t center align my footer blocks on mobile. Any pointers? Would appreciate some help!

URL: https://www.mauifruitjewels.com

Hey there,

I tried your code on my prestige theme but it didn’t center align my footer blocks on mobile. Any pointers? Would appreciate some help!

URL: https://www.mauifruitjewels.com