How can I make the product cards on the collection page take up the full width of the screen like this
This is how my product cards look
Topic summary
A user seeks to make product cards on their Shopify collection page span the full width of the screen, providing screenshots showing the desired layout versus their current narrower card display.
Solutions Provided:
Three community members offered CSS-based solutions with slight variations:
-
Method 1: Add CSS code to
base.cssfile targeting.collection.page-widthwithmax-width: 100%and adjusting grid column widths for desktop screens (990px+) -
Method 2: Insert CSS in
theme.liquidfile above the</body>tag, setting full width for the collection container andspace-betweenjustification for the product grid -
Method 3: Apply the same CSS through Shopify’s Theme Customizer under Custom CSS settings (no code file editing required)
All solutions use !important declarations to override existing styles and make the collection page container full-width while removing default padding.
Resolution: The original poster confirmed success with a thank you, indicating the issue was resolved. Screenshots were provided showing before/after results.
Hello @flamontana
Go to online store ----> themes ----> actions ----> edit code ---->base.css
add this code at the end of the file and save.
@media screen and (min-width: 990px) {
.collection.page-width {
max-width: 100% !important;
padding: 0px !important;
}
.grid--4-col-desktop .grid__item {
max-width: calc(50% - var(--grid-desktop-horizontal-spacing)* 3 / 4);
}
}
result
If this was helpful, hit the like button and accept the solution.
Thanks
Hey @flamontana ,
To make the product cards on your collection page take up the full width of the screen,
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
add the following CSS:
.collection.page-width {
max-width: 100% !important;
padding: 0 !important;
}
ul#product-grid {
justify-content: space-between !important;
}
This will make the product cards responsive and span the full width.
If I was able to help you, please don’t forget to Like and mark it as the Solution!
If you’re looking for expert help with customization or coding, I’d be delighted to support you. Please don’t hesitate to reach out via the email in my signature below—I’m here to help bring your vision to life!
Best Regard,
Rajat Sharma
Hi @flamontana
You can follow this instruction:
-
Go to Shopify > Theme > Customize
-
Copy and paste this code on Theme settings > Custom CSS section
.collection.page-width {
max-width: 100% !important;
padding: 0 !important;
}
ul#product-grid {
justify-content: space-between !important;
}
Result:
Liz
Thank you!