Gap between header and product collection

[leomay]

Hi,

I have a strange problem.

My product page should look like this:

but when i refresh the page, in most cases the site looks like this:

As you can see, there is a huge gap between header and product collection.

How can i fix this issue?

Thank you for your help

[Made4uo-Ribe]

Hi @leomay

Would you mind to share your Store URL website? with password if its unpublish. Thanks!

[leomay]

of course.

www.arthouse.boutique

password: earlyaccess

[Made4uo-Ribe]

Thanks for the info, try 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:

h1.collection-hero__title {
    margin-bottom: 0px;
}

• And Save.
• Result:
• 

Let me know if you like to decrease more.

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

[leomay]

I use the Dawn Theme and added the code into the bottom of base.css file. But still, the issue continues to appear. I would also like to mention, that the problem does not appear in theme editor, only on the “real” website

[leomay]

I added some code in the “component-collection-hero.css” file earlier.

Perhaps the issue is connected to it.

The code was:

}

.collection-hero__title {
text-align: center;
}
.collection-hero__description {
margin: auto;
}

[Made4uo-Ribe]

Yeah, I see it. And it adjust. Please refresh the browser when you make some changes in the codes.

[Made4uo-Ribe]

No, It not that code. You add margin in the description but description is not visible. This is the last space remaining in the header and collection pages. Would you like to remove it also?

This will be result if you remove them.

[leomay]

Sir, i refreshed the browser multiple times.

[Made4uo-Ribe]

Oh, Sorry. But this is not visible on my screen. What browser are you using? I open in incognito chrome and mozzilla still not visible on my side. If you say its not showing on the theme editor only in the website?