Mobile Shopify Header Is Top Aligned And Not Centered

Store Design
, ,

Topic summary

A Shopify store owner reports that their site header displays correctly on desktop, but on mobile the store name “Music Festival Supplies” appears top-aligned instead of centered.

Proposed Solution:

  • Add CSS code to theme.scss.liquid file targeting .site-header__logo.mobile-logo with display: flex and align-items: center properties

Issue with Initial Fix:

  • The suggested CSS corrected mobile alignment but broke the desktop header layout

Working Solution:

  • Wrap the CSS fix in a media query @media only screen and (max-width: 749px) to apply styling exclusively to mobile devices
  • This approach successfully centers the mobile header while preserving the desktop design

Status: Resolved through responsive CSS targeting mobile viewports only.

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

hello, my site looks good on desktop but on mobile at the top of the page the name Music Festival Supplies seems to be top-aligned and not centered in the header. I have been unsuccessful trying to fix this.

website url: musicfestivalsupplies.com

2

Hi @Cheddarrl
To fix the problem
You can try follow this path:
Themes => edit code => asset => theme.scss.liquid
and add this code to bottom of the file theme.scss.liquid

.site-header__logo .mobile-logo{
display: flex;
align-items: center;
}
1 Like
3

now the header shows up wrong on desktop site but mobile is fixed, any ideas?

4

This code works exactly as needed to hide the website name on desktop view and align it properly

@media only screen and (max-width: 749px){.site-header__logo .mobile-logo {
display: flex;
align-items: center;
}}