Add space between header and first section

Shopify Discussion

Topic summary

Main issue: add space between the header and the first section so the image doesn’t touch the header on a Shopify theme.

Actions taken:

  • After the store URL (Laketti.com) was provided, a contributor suggested adding CSS in the theme’s CSS file (base.css/style.css/theme.css). CSS (Cascading Style Sheets) controls page styling.
  • Code added: .js-wrap-image-lazy.d-block.o-hidden.h-100 { padding-top: 40px !important; } This successfully created top spacing.

Follow-up issue: remove extra space at the bottom of the section.

  • First attempt: .s-header.zi-1, .section.section-unique { padding-bottom: 0px !important; } did not work.
  • Second attempt: .section.section-unique { padding-bottom: 0px !important; } and .main-collection-product.section.section-alone { padding-top: 0px !important; } was proposed with a screenshot illustrating the expected result.
  • The original poster reported the code as “invalid,” requesting another solution.

Outcome:

  • Top spacing resolved.
  • Bottom spacing unresolved; the last CSS change was not accepted/valid.

Notes:

  • Screenshots are used to show visual before/after results, central to understanding changes.
  • Discussion remains open with no final fix for bottom spacing yet.
Summarized with AI on January 12. AI used: gpt-5.
1

I’m trying to add some space between the header and the first section so that the image isn’t touching the header. How do I add a little space?

Screenshot 2023-11-27 at 10.43.34 AM.png
Screenshot 2023-11-27 at 10.43.34 AM.png2526×1354 469 KB

1 Like
2

Hello @hzimm ,

I am not sure but I think I can help you with this. May I have your store URL please.

3
4

Hi @hzimm

Check this one.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • 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:
.js-wrap-image-lazy.d-block.o-hidden.h-100 {
    padding-top: 40px !important;
}

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

1 Like
5

Thank you!! That worked great :slightly_smiling_face:

Is there a similar solution to removing extra space at the bottom of the section?

1 Like
6

Yeah, check this one.

Same Instruction.

.s-header.zi-1, .section.section-unique {
    padding-bottom: 0px !important;
}

And Save.

Let me know if you like more lesser.

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

7

This one didn’t work- is there another solution?

1 Like
8

Replace with this code.

.section.section-unique {
    padding-bottom: 0px !important;
}
.main-collection-product.section.section-alone {
    padding-top: 0px !important;
}

And Save.

Result:

Made4uoRibe_0-1701121652856.png
Made4uoRibe_0-1701121652856.png1503×707 81.5 KB

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

9

It says that the code is invalid, is there another solution?