Hi. Anyone know what css I can use to center align footer menu in mobile view?
Looks like this today, I want the 4 white links to be centered above the logo / under newsletter
Topic summary
A Shopify store owner using the Craft theme needed help center-aligning footer menu links on mobile view. The footer links were displaying left-aligned, but they wanted them centered.
Initial Solution:
- Community member suyash1 provided CSS code to add to the base.css file
- The code used a media query targeting screens under 989px width
- Applied
justify-content: center !importantto.list-menu__item--linkelements - This successfully resolved the mobile alignment issue
Follow-up Request:
- The store owner then asked about center-aligning both the logo and footer menu on desktop view as well
- suyash1 initially advised against this approach, sharing a preview image showing it wouldn’t look optimal
- However, the client insisted on this layout
Desktop Solution:
- Additional CSS was provided using a min-width: 750px media query
- Applied flexbox properties (flex-direction: column, align-items: center) to the footer grid
- Added text-align: center to footer block images and list content
- The solution successfully centered all footer elements on both mobile and desktop views
1 Like
@Havard - please share your site link
Sorry you are facing this issue, it would be my pleasure to help you.
Welcome to the Shopify community! 
Thanks for your good question.
Please share your site URL,
I will check out the issue and provide you a solution here.
Hi, URL:
https://hellstromitems.no/
Pass: anahly
I need the footer menu to be centered on mobile view. Thanks.
Hi, URL:
https://hellstromitems.no/
Pass: anahly
I need the footer menu to be centered on mobile view. Thanks.
@Havard - add this css to the very end of your base.css file and check
@media screen and (max-width: 989px){
.footer-block__details-content .list-menu__item--link {justify-content: center !important;}
}
1 Like
It worked, thanks so much !! Appreciate!
@Havard - please like message and accept it as solution, also if you want more updates then you can message me on my email below.
1 Like
Thanks - and done!
1 Like
@Havard - thank you very much.
1 Like
@suyash1 Can I ask one more question - I also need to center align both logo and footer menu on desktop view? Any chance you can help me out with css to add in? Thanks.
https://hellstromitems.no/
Pass: anahly
@Havard - it will look like this, hence I do not recommend it
Suyash1 I personally agree, but client wanted to see, but with the menu above the logo - like mobile view also on desktop.
@Havard - try this
@media screen and (min-width: 750px){
.footer__content-top .grid {flex-direction: column;
align-items: center; justify-content: center;}
.footer__content-top .footer-block__details-content>li{text-align: center;}
.footer__content-top .footer-block-image{text-align: center;}
}
Perfect. Thanks so much!