Hello!
I’m trying to remove the gap between the filter options and the products showing below. Could you please help with this?
theme: Craft
Website: saaah.org
thank you!
Topic summary
Issue: On the Craft theme’s collection page in mobile view, there’s an unwanted gap between the filter (facets) section and the product grid (site: saaah.org).
Proposed fixes (mobile-focused):
- Code edit in theme files: In Assets > component-facets.css, add a media query to adjust the filter form layout:
@media (max-width: 749px) { .facets__form { display: flex; flex-wrap: wrap; } } - Custom CSS via Customize > Theme settings: Hide the small-screen facets element that may create extra space:
.facets.small-hide { display: none !important; }
Notes: Screenshots were provided to illustrate the spacing issue. “Facets” refers to the filter UI block on collection pages.
Status: Two alternative CSS solutions suggested; no confirmation from the original poster yet, so outcome unresolved.
1 Like
@Saaah oh sorry for this issue
can you try this code its work on mobile
- Go to Online Store->Theme->Edit code
- Asset->/component-facets.css ->paste below code at the bottom of the file.
@media(max-width: 749px){.facets__form {display: flex;flex-wrap: wrap;}}
Hi @Saaah
Please add this code to Custom CSS in Online Store > Themes > Customize > Theme settings
.facets.small-hide { display: none !important; }
