My website: www.onecap.se
CAINTE: https://cainte.se/
Topic summary
A user seeks help matching their website’s collection page layout to reference site CAINTE’s design, specifically addressing spacing and margin issues.
Two solutions provided:
-
PageFly-Richard’s approach: Add CSS code to theme.liquid file above tag, targeting
.collection-slider-row .containerwith 30px padding adjustments and.collection-listing .product-listwith -10px margins at max-width 767px. -
ZenoPageBuilder’s approach: Add CSS code to styles.css file at the bottom, targeting
.collection-listing .product-listwith margin adjustments including!importantflags.
Both responses include code snippets and screenshots demonstrating the expected results. The discussion remains open as the original poster has not confirmed which solution worked or if the issue is resolved.
Hi @OneCap
This is Richard from PageFly - Shopify Page Builder App
Please add this code to your theme.liquid above the to get this solved
Step 1: Online Stores > Themes > More Actions > Edit code
Step 2: click on theme.liquid and paste the code above the
<style>
.collection-slider-row .container {
padding-left: 30px !important;
padding-right: 30px !important;
}
.collection-listing .product-list {
margin-left: -20px !important;
margin-right: -20px !important;
}
@media (max-width: 767px){
.collection-listing .product-list {
margin-left: -10px;
margin-right: -10px;
}
}
</style>
Hope this can help you solve the issue
Best regards,
Richard | PageFly
1 Like
Hello @OneCap 
In Shopify Admin, you can go to Edit theme code, open file styles.css and add this code at the bottom
.collection-listing .product-list {
margin-left: 0 !important;
}
The result
Hope that helps!