Hi guys,
I would like to reduce the gap between the bar filter and collection image.
Thank you
Topic summary
A user seeks to reduce the vertical spacing between the filter bar and collection banner image on their Shopify store’s collection page.
Initial Problem:
- Gap between filter bar and collection header image is too large on both desktop and mobile views
- Multiple screenshots provided showing the spacing issue
Solution Provided:
MandasaTech offered CSS code to be added to the theme.liquid file before the closing </body> tag:
- Desktop: Reduces
.collection-heromargin-bottom to 15px - Mobile: Sets
.collection-heromargin-bottom to 5px and.filters-toolbar-wrappermargin-bottom to 0px - Uses media queries for responsive adjustments
Current Status:
- Desktop spacing successfully reduced
- Mobile spacing also addressed
- User now requesting additional refinement: reduce gap between filter bar titles and center product positioning in mobile view
- Discussion remains ongoing with further customization requests
I meant the collection image header
i reduce gap between filter bar and collection images .
Hello @Alliance
It’s GemPages support team and glad to support you today.
I would like to give you a solution to support you.
-
Go to Online Store → Theme → Edit code.
-
Open your theme.liquid theme file.
-
Paste the below code before :
- Reduce Gap: Collection banner with Bar Filter Collection
- Reduce Gap: Bar Filter Collection and Product list
Hope my solution can work and support you!
Kind & Best regards!
GemPages Support Team.
Hello @Alliance
I would like to give you a solution to support you:
- Go to Online Store-> Theme-> Edit code
- Open your theme.liquid theme file
- Paste the below code before :
<style>
@media only screen and (min-width: 750px){
.collection-hero {
margin-bottom: 23px !important;
}
}
</style>
Was my reply helpful? Please Like and Accept Solution. This mean alot to me
I would like to give you a solution to support you:
- Go to Online Store-> Theme-> Edit code
- Open your theme.liquid theme file
- Paste the below code before :
<style>
@media only screen and (min-width: 750px){
.collection-hero {
margin-bottom: 15px !important;
}
}
</style>
Was my reply helpful? Please Like and Accept Solution. This mean alot to me
Worked excellent on desktop view, but on mobile view, no change. Also, if you can reduce the gap between the filter bar titles. Thank you
I would like to give you a solution to support you:
- Go to Online Store-> Theme-> Edit code
- Open your theme.liquid theme file
- Paste the below code before :
<style>
@media only screen and (min-width: 750px){
.collection-hero {
margin-bottom: 15px !important;
}
}
@media(min-width: 280px) and (max-width: 767px){
.collection-hero {
margin-bottom: 5px !important;
}
.filters-toolbar-wrapper {
margin-bottom: 0px !important;
}
}
</style>
Was my reply helpful? Please Like and Accept Solution. This mean alot to me
Was my reply helpful? Please Like and Accept Solution. This mean alot to me
