Make product cards take full width of the screen

[flamontana]

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

[Rahul_dhiman]

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

[rajweb]

Hey @flamontana ,

To make the product cards on your collection page take up the full width of the screen,

Follow these steps:

1. Go to Online Store

2. Edit Code

3. Find theme.liquid file

4. 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

[LizHoang]

Hi @flamontana

You can follow this instruction:

1. Go to Shopify > Theme > Customize

2. 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

[flamontana]

Thank you!