How can I center the footer menu on my mobile website?

Store Design

Topic summary

A user seeks help centering footer menu items on mobile devices for their Shopify store.

A community member provides CSS code to be added to the theme.scss.liquid file within the theme’s Asset folder, targeting mobile screens with a max-width of 749px. The code uses text-align and justify-content properties to center footer elements.

Key developments:

  • Multiple users successfully implement the solution and express gratitude
  • Additional users request similar help for their specific stores, with the helper requesting store URLs and passwords to diagnose issues
  • Some users report the code doesn’t work for their particular theme (e.g., Studio theme) or conflicts with existing custom CSS

Current status:

  • The thread remains active with ongoing troubleshooting requests
  • Several users indicate the solution isn’t working for them, suggesting theme-specific variations may require customized approaches
  • The helper continues requesting store access details to provide personalized solutions
Summarized with AI on November 11. AI used: claude-sonnet-4-5-20250929.
1

How can I center align the footer menu on my mobile version of the website. https://pro-convert.com/ Thank you :slightly_smiling_face:

footer.png
footer.png454Ă—498 7.99 KB

1 Like
2

Hello, @cliff781

Welcome to the Shopify community!
and Thanks for your Good question.

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
@media only screen and (max-width: 749px) {
.site-footer__content {
    text-align: center;
}
.site-footer__item {
justify-content: center;
}
}
3 Likes
3

Thank you :slightly_smiling_face:

1 Like
4

@cliff781

Thanks for accept and you complimetns.

1 Like
5

@KetanKumar hope you can help me as well please: www.rakao.de on mobile version the footer links are not in center under the payment icons, i circled blue:

IMG_8356BB0C2140-1.jpeg
IMG_8356BB0C2140-1.jpeg1125Ă—2436 167 KB

thank you so much.

1 Like
6

@FranziRak

Thanks for post

  1. Go to Online Store->Theme->Edit code
  2. Asset->/timber.scss.liquid->paste below code at the bottom of the file.
@media screen and (max-width: 768px) {
.site-footer .grid__item.medium-up--one-third.small--one-half {
    width: 100%;
    padding-left: 0;
}
}
7

thank you so much :slightly_smiling_face: you are the best @KetanKumar

1 Like
8

@FranziRak

Thanks for update and support.

9

Hi, How do I centre align the Quick Links Footer Menu like the attached?

Untitled.png
Untitled.png1675Ă—363 50.5 KB

10

Share your store URL and password.

11

Hi, Is there a way I can do it myself?

1 Like
12

@TaeghanM

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

13

Hey @KetanKumar ,

I tried implementing this code to center my menu in my footer, but it doesn’t seem to work for me. I have similar code already at the bottom of my theme.scss.liquid file so maybe that is causing the issue. The additional code I have in there was to remove the “special instruction for seller” area on the cart page.

Here is the current code I have. Could you please help with this.

.cart__footer .grid__item:nth-child(1){
visibility: hidden;
pointer-events: none;
}

@media (max-width: 767px){
.cart__footer .grid__item:nth-child(1){
display: none;
}
}

@media only screen and (max-width: 749px) {
.site-footer__content {
text-align: center;
}
.site-footer__item {
justify-content: center;
}
}

1 Like
14

@Rippermagoo

oh sorry for that issue can you please share store url

15

Sure it is www.myastronome.com

16

could you help solve this issue with the theme Studio? This does not work for me.

1 Like
17

@skyebarn

can you please send store url

18

Hi,

I am not sure how to add a new comment but i would like some advise please.

My url is https://voujon.myshopify.com/

as you can see the footer items are not cantered. Neither on Mobile. How do I center these on both desktop and mobile.

Thanks.

19

Your code is not working

20

DOES NOT WORK FOR ME?