Remove the white space under the banner

[Olivier10]

Hello,

I'm trying to Remove the white space between the banner and the top of the site. 

Just Below the fav, but under the banner.

 

My template only provide with "section height" , i managed to put the maximum space between blocks as a 0 value, but now, i feel like i have to "create" a new "option of height" with 0 space, and it feel complicated. 

 

If anyone have a easy, even a hard way for this? If not, i will just look for a developper.

My theme is Enterprise.

[Javitoo]

Hi @Olivier10 can you share a link to your store so I can inspect what can be causing the issue?

[Olivier10]

The thing is, i'm still currently working on it as a draft, and i didn't put it online yet ! Here is the link but it wont appear i guess ? https://sofareva-literie.myshopify.com/ 

[Javitoo]

You are right, I can't see it
But you can share a preview link, look if this help you to show a preview here:
https://community.shopify.com/c/shopify-design/how-can-i-share-an-unpublished-theme-preview-link/td-...

[Javitoo · Accepted solution]

Hi there! I totally understand what you're trying to do - those extra spaces can be really annoying when you're aiming for a specific look!
Let me help you with a simple solution that should work with your Enterprise theme.

To remove that white space between the banner and the top of your site, you'll need to add a small piece of CSS code. Here's how:

First, try looking for any of these files in your theme editor (Online Store → Themes → Actions → Edit code):

- custom.css
- theme.css
- base.css
- styles.css

and add this line to the end:

.section--padded-xsmall {
    padding-top: 0 !important;
}

If you can't find any of those CSS files, don't worry! You can add the code to your theme.liquid file instead:

Find "theme.liquid" in your theme files
Look for the closing  "</head>" tag
Add this code just before that tag:

<style>
.section--padded-xsmall {
    padding-top: 0 !important;
}
</style>

Result:

[Olivier10]

Worked perfectly, thanks ! 

[Made4uo-Ribe]

Hi @Olivier10 

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:

div#sections--24656935584089__scrolling_banner_AcxMCp {
    padding-top: 0 !important;
}

• And Save.
• Result:
• 

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

[Olivier10]

Thanks, helped me a lot to understand better ! 

Have a nice day