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.
1

Hi Shopify community,

I’m struggling with my Header, where my mobile look well, my desktop is not.

how to change the size of my desktop header like the mobile one, without impacting the mobile sizing.

website : https://www.bonnedose.co/

Best

1 Like
2

Hey @Vironne

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 tag

RESULT:

Moeed_0-1733838578149.png
Moeed_0-1733838578149.png1896×914 227 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

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
4

thanks a lot :slightly_smiling_face: