Needing help to central my logo on mobile view

Technical Q&A
,

Topic summary

A user seeks help centering their logo on mobile view for the Warehouse Premium theme. The logo currently appears aligned to the left side.

Solutions Provided:

  • Moeed suggested adding CSS code to theme.liquid above the </body> tag using media queries to adjust header spacing, though this didn’t fully center the logo.

  • Zachary1 recommended adding CSS to theme.css with margin-left: 2em !important on .header__logo, providing a visual example. The user reported implementation issues and couldn’t publish changes.

  • britimein1 offered comprehensive CSS targeting multiple selectors (.site-header__logo, .header__logo, etc.) using flexbox properties and auto margins for mobile screens under 749px.

Current Status:

The issue remains unresolved. The user encountered difficulties implementing the suggested code and requested additional guidance on checking for existing <style> tags in their theme files. No confirmation of a working solution has been posted.

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

Hi, i use theme premium (wwarehouse) wanting to central my logo for mobile phone as it is currently to the side

Screen Shot 2025-08-10 at 3.31.33 pm
Screen Shot 2025-08-10 at 3.31.33 pm922×1200 106 KB

2

It actually looks great where it’s at.

3

Hey @pnsempire

Share your store URL and Password if enabled.

Best,
Moeed

4

here is the link

5

Hey @pnsempire

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above </ body> tag
<style>
@media screen and (max-width: 767px) {
.header__inner {
    justify-content: space-between !important;
}
.header__action-list {
    margin-left: 0 !important;
}
}
</style>

RESULT:

image
image345×747 45.9 KB

If I managed to help you then a Like would be truly appreciated.

Best,
Moeed

6

Hey thanks for the reply, that still isnt fully in the middle, how can i get it fully in the middle

7

Hello @pnsempire

Please kindly try this code I attach below by adding in theme.css file and see if it works on your store mobile port. If it works, it should look like the image I share here:

<style>
.header__logo {
margin-left: 2em ！important;
}
</style>

image
image446×785 60.7 KB

8

Hey, tried however it doesnt work

10

tried on the header, doesnt seem to work i cant even publish it. can you please advise

11

May I know if your theme contains related codes already? If so, you can add below code inside related code patterns directly, and it will work as well.

.header__logo {
margin-left: 2em ！important;
}
12

how do i check that?

13

You can check by searching with in theme.css to see if it exists already. If so, you can add my shared codes inside and content, so that the code will work correctly.

14

Use this css

/* Center logo on mobile (Warehouse Premium ww ar ehouse) / @media (max-width: 749px) { / Center the logo image inside its container */ .site-header__logo, .header__logo, .logo, .site-header__logo-img { display: block; margin-left: auto; margin-right: auto; float: none; text-align: center; }

/* If the header uses a flex container, center items in the header row */ .site-header__wrap, .header__inner, .header__bar { display: flex; justify-content: center; align-items: center; }

/* Optional: ensure nav/menu doesn’t push logo off-center */ .site-header__right, .header__icons, .header__menu { justify-content: center; } }