How can I center my logo on mobile without changing its size?

Store Design
,

Topic summary

A user is trying to center their logo on mobile devices without reducing its size. They applied CSS code that pushed the logo to the right to fix off-center positioning, but this unintentionally shrunk the logo.

Current Issue:

  • Logo moves right but also decreases in size
  • User wants centering without affecting dimensions

Solution Provided:
A community member offered CSS code to resolve the issue:

  • Navigate to Shopify admin → Online Store → Themes → Edit code
  • Locate the CSS file (base.css, style.css, or theme.css) in the Assets folder
  • Add media query targeting screens up to 767px width
  • Apply margin: auto to center the header heading
  • Hide search modal details on mobile
  • Adjust header padding to 2px

The discussion includes the store URL for reference and appears to provide a working solution, though implementation confirmation is pending.

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

How would i centre my logo without affecting it’s size. Ive pushed the logo to the right with this code as it was off centre but it has also shrunk the logo. How do i move it to the right so it is centre without affecting it’s size??

@media screen and (max-width: 767px){
h1.header__heading {
margin-left: 30px;
}
}

1 Like
2

Can you share your store URL please

3

Hi @Khaleed

Would you mind to share your Store URL website? with password if its protected. Thanks!

4

gorillagainsupps.com

1 Like
5

gorillagainsupps.com

6

Try this one.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
@media screen and (max-width: 767px) {
    h1.header__heading {
    margin: auto !important;
}
    details-modal.header__search {
    display: none !important;
}
}
@media only screen and (max-width:400px){
    .header {
    padding: 2px 2px !important;
}
}