How can I center the footer menu on mobile using Dawn theme?

Store Design

Topic summary

A user seeks to center the footer menu on mobile devices in Shopify’s Dawn theme. They’ve successfully centered it on desktop using CSS media queries but need a mobile solution.

Proposed Solutions:

  • One suggestion targets footer links with text-align: center and display: block for screens under 768px
  • Another recommends adding CSS to section-footer.css that centers the footer grid and adjusts list item margins

Current Issue:
A commenter notes that the proposed code only centers the footer title, not the actual menu options.

Status:
The discussion remains ongoing. A contributor has requested store URL access (provided with password) to investigate and provide a more accurate solution. The issue appears unresolved as the initial suggestions didn’t fully address the centering requirement.

Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.
1

I want to center the footer menu on mobile. I have it working for the pc version using this code:

@media screen and (min-width: 768px){
.footer__content-top .grid__item {
    padding-left: 15rem !important;
}
  
.footer__content-top .grid {
    margin-left: 10rem !important;
    margin-right: 10rem !important;}
}

My website is: https://bladelighter.com/pages/696969

2 Likes
2

Please Use this code

@media screen and (max-width: 767px){
.footer-block ul li a {
    text-align: center!important;
    display: block;
}
}
3

@jackrivers

yes, please try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/section-footer.css->paste below code at the bottom of the file.
.footer__content-top .grid {
    text-align: center;
}

.footer-block__details-content>li:not(:last-child) {
    margin-right: 0;
}
4

But this does not centralize the menu options, it just centres the title.

1 Like
5

@kashco can you please provide your store url so i will check and update you

6

https://kashco-interiors.myshopify.com/

password: Kashco