Why won't my mobile logo center in the Vantage theme?

Store Design

Topic summary

A Shopify store owner using the Vantage theme encountered an issue where their logo appeared left-aligned on mobile devices despite being centered on desktop.

Solution Provided:
Multiple community members offered CSS code snippets to resolve the centering issue. The working solution involved adding media query CSS code to center the logo on mobile screens:

@media only screen and (max-width: 980px) {
  #logo img {
    margin: 0 auto;
  }
}

Implementation:
The code should be added either to the theme’s CSS stylesheet or in the theme.liquid file before the closing </body> tag.

Outcome:
The original poster confirmed that the first suggested CSS solution successfully centered their mobile logo. They expressed appreciation and indicated they would keep the alternative solutions for future reference. The issue is now resolved.

Summarized with AI on November 22. AI used: claude-sonnet-4-5-20250929.
1

I cannot make the header logo center on mobile, it is adjusted left even though my desktop logo is center. I tried this code:
https://community.shopify.com/c/shopify-design/vantage-theme-mobile-logo-is-not-centered/td-p/1468036

It didn’t work. Please help.

The store is in draft mode still and can be previewed here:

https://uyv2pak75nawqhe2-1832011.shopifypreview.com

2

Please try this code instead.

@media only screen and (max-width: 980px) {
  #logo img {
    margin: auto;
  }
}
1 Like
3

Hi @kent_uyehara

You can try this code by following these steps:

Go to Online store => themes => actions => edit code and add this code on file theme.liquid before tag

PageFlyVictor_0-1676943164879.png
PageFlyVictor_0-1676943164879.png1600×777 194 KB

Hope this answer helps.

Best regards,

1 Like
4

HI @kent_uyehara ,

Glad to support you today.

You can check out my suggestion below to get your concern resolved:

  1. Go to Edit code on Online Store:

GemPages_0-1676943604100.png
GemPages_0-1676943604100.png400×163 25.3 KB

  1. add my code above the tag on Theme.liquid:

I hope you find the answer helpful.

Kind & Best regards,
GemPages Support Team.

1 Like
5

Hi @kent_uyehara

I hope you are doing good and welcome to the Shopify Community!
I am Santanu from MS Web Designer (Top Rated Shopify Certified Experts and eCommerce Consultant from Singapore).

Please add this css in your bottom of the css file:

@media only screen and (max-width: 980px) {

#logo img {margin: 0 auto;}

}

Regards,

Santanu

1 Like
6

Thanks for the help, I added this to the stylesheet css and it worked. I appreciate it thanks.

7

Thanks for the feedback, the first post worked so I will hold onto this for future reference. Thanks!

8

Thanks for the feedback, the first post worked so I haven’t tried this but will hold onto it for future reference. Thanks!

9

The first post worked so I haven’t tried this but will hold onto it for future reference. Thanks for the help!