Hello there! I noticed that there is a huge margin betwen my header adn the next contect after it it. How should i lessen the gap and how can I center the product presented on this page. Thank you.
@Boomcookies0 , Hope you are doing well.
Could you please share your store URL?
Hey @Boomcookies0
Follow these Steps:
- Go to Online Store
- Edit Code
- Find theme.liquid file
- Add the following code in the bottom of the file above tag.
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
Best Regards,
Moeed
Thank you! This is very helpful. However all the header of the page on my websire got a wide gap from the next thing tho. 
Hey @Boomcookies0
Remove the previous code and add this updated code
Follow these Steps:
- Go to Online Store
- Edit Code
- Find theme.liquid file
- Add the following code in the bottom of the file above tag.
{% if collection.handle == 'flavors' %}
{% endif %}
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
Best Regards,
Moeed
1 Like
I tried using this code and It did work on the flavors page however all of the headers on my other pages started to have huge margins.
@Boomcookies0 , add the below css just before the closing tag
{% if request.page_type == 'collection' %}
{% endif %}
this will remove the spacing for all collection page.
To fix this, you can use the following code:
{% if collection.handle == 'flavors' %}
<style>
div#shopify-section-template--19557353128234__main-product-grid {
margin-top: 0 !important;
}
div.header {
margin-bottom: 0 !important;
}
</style>
{% endif %}
This code will set the margin-top of the product grid to 0 on the flavors page, and it will also set the margin-bottom of the header to 0 on the flavors page. This will remove the gap between the header and the product grid, while still keeping the margins on the other pages the same.