dekstop vs mobile Header sizing

Shopify Discussion

Topic summary

A Shopify store owner is experiencing header sizing issues where the mobile version displays correctly, but the desktop version does not match the desired appearance.

Solutions Provided:

Two community members offered CSS-based fixes:

  • Option 1: Add custom CSS code directly to the theme.liquid file, placing it above the closing </body> tag
  • Option 2: Navigate to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS and insert a media query that adjusts header padding for desktop screens (min-width: 1024px)

Both solutions use CSS to modify the desktop header sizing without affecting the mobile layout.

Outcome:

The original poster confirmed the issue was resolved, thanking the community for their help. The discussion appears to be closed with a successful resolution.

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

Hi @Vironne

To complete your requests, please follow these steps:

  1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
  2. Paste the code provided into the Custom CSS section.
@media screen and (min-width: 1024px){
header.header {
    padding-block: 10px !important;
}
}

Here is the result: https://prnt.sc/uGgyGlLwn7IX

I hope this helps

Best,

Daisy

1 Like