Change Padding Between Header And Section

Store Design
, ,

Topic summary

A user needed to increase spacing between their homepage header and featured collection section, but only on desktop view.

Initial Solution:

  • Add CSS code to the theme’s stylesheet (base.css, style.css, or theme.css):
.featured-collection {
    padding-top: 80px;
}

Problem: This solution worked but affected mobile view negatively, pushing content too far down.

Final Solution:

  • Replace with media query targeting desktop only (min-width: 749px):
@media only screen and (min-width: 749px) {
  .featured-collection {
    padding-top: 5rem;
  }
}

Status: Resolved. The desktop-only padding adjustment worked as intended without impacting mobile layout.

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

Hello,

I’m trying to increase the space between the header and the featured collection on my Homepage. I’m not sure exactly where to find the code to do it. Anyone able to assist? My site is password protected, but I can send a collaborator code.

Thanks

Screenshot 2025-01-19 at 3.59.59 PM.png
Screenshot 2025-01-19 at 3.59.59 PM.png2822×1530 187 KB

1 Like
2

Hi @corp41

Please, share your store URL or preview. I dont need a collaboration access. THanks!

3

Just sent you a message with that info! Thanks!

4

Thanks for the info, try this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.featured-collection {
    padding-top: 80px;
}

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like
5

That worked perfectly. Is there a way to make it where the change only affects desktop and not mobile? It pushes the mobile view a little too far down.

6

Hi Corp41

  • You can try to follow this step
    Step 1: Go to Edit code
    Step 2: Find file base.css, style.css or theme.css and add this code at the end of the file
@media (min-width: 768px) {
  .featured-collection {
     padding-top: 80px !important;
  }
}

Best,
Esther

7

Thanks for that, it didn’t seem to work.

8

Yes, replace to this code.

@media only screen and (min-width: 749px) {
  .featured-collection {
    padding-top: 5rem;
  }
}

And Save.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like
9

Worked perfectly, thank you for your help!