Logo header has too much padding on mobile - how to reduce?

Store Design

Topic summary

Seeks help reducing excessive vertical padding around the homepage logo/header on mobile only; desktop layout should remain unchanged. The goal is to decrease the space above and below the logo on phones.

Attempts: Tried multiple CSS overrides (custom styling rules) added to both the section CSS and base code, but changes didn’t take effect. The author is fairly new to Shopify.

Context provided: Shopify preview URL and password, and a suspected section ID (shopify-section-template–19161912344748__section_Fh7TFQ). A screenshot illustrates the extra whitespace around the logo on mobile.

Status: No solution yet; requesting guidance on the correct CSS approach to target and reduce mobile header/logo spacing only.

Summarized with AI on January 2. AI used: gpt-5.
1

Hi friends,

Hoping someone can help me reduce the vertical padding on my homepage header / logo banner on mobile only.

I’m trying to make the space above and below the logo smaller on mobile, as there’s currently a lot of empty space. Desktop is fine, I only want this to affect mobile.

I’ve tried a few CSS overrides (added to both section CSS and base code) but haven’t been able to get it to respond yet.

Site URL: https://wren-studios-3.myshopify.com/
Password: wren123

I’m fairly new to Shopify, but from inspecting the page I believe the section ID is:
id=“shopify-section-template–19161912344748__section_Fh7TFQ”

Wren Studios
Wren Studios1179×2556 297 KB

1 Like
2

It’s not a header section.

You have minimum height set on this section and inner block, kinda like this:

Screenshot 2026-01-03 at 11.26.56 PM
Screenshot 2026-01-03 at 11.26.56 PM690×202 13.2 KB

Set it to auto?

And then looks like you also have top padding set on Logo block…

3

Hi! Thank you for this suggestion, i had been going around in circles and was convinced it was the section padding - I set it to auto and just added some padding above/below the logo. Thank you!!

1 Like
4

Please add this code to Custom CSS in Theme settings.

@media (max-width: 749px) {
#shopify-section-template--19161912344748__section_Fh7TFQ .logo-block
    spacing-style {
      --padding-block-start: 0px !important;
      --padding-block-end: 24px !important;
  }
}

Screenshot 2026-01-06 at 10.35.07
Screenshot 2026-01-06 at 10.35.07800×852 99 KB

7

Hi, I hope you’re doing great.
Please open your theme, go to Edit Theme, then locate and click on the logo section. After that, open Custom CSS and add this line there,

@media(max-width:749px){.spacing-style {-–spacing-scale: 0px !important;}}

then check the result. I hope the shadow will be removed, but if you still notice the shadow, please let me know and I’ll share a more detailed solution.