Product Grid Full Widht - RIDE Theme

[GASTY]

Hi there! Does anyone know how to make the product grid in the collection pages full widht? Any chance we can add a css code like the below just for the grid on desktop? I don’t want to change the widht of the whole page as it’ll mess up the header and other sections.

https://gastonduflos.com/collections/all-products

Please help! Thank you everyone.

[EBOOST]

Hi @GASTY ,

May I suggest to update code these steps:

1. Go to Store Online-> theme → edit code

2. Assets/base.css
3. Add code below to end of file

#ProductGridContainer .collection.page-width {
    max-width: none!important;
    width: 100%;
}

[GASTY]

Hi @EBOOST thank you so much, it worked perfectly.

Do you know how to achieve the same for the product container in the product page? I would like to have the same widht for the product images/description and the related products:

https://gastonduflos.com/products/print-1

Thank you so much!

[EBOOST]

Hi,

May I suggest add code below for product page

#MainContent product-recommendations.page-width,
#MainProduct-template--15488950239337__main > .page-width {
    max-width: none;
}

[GASTY]

Thank you @EBOOST worked perfect. Do you know why the images look pixelated even when they are bigger resolution than the block? If you click on zoom you can see that the quality is much better: https://gastonduflos.com/products/print-1

Also! I have another product template, could we please add it into the same css ? https://gastonduflos.com/products/print-1

[EBOOST]

Hi,

I think the quality of images are the same. Maybe you see the large image will be better.

Original: https://gastonduflos.com/cdn/shop/files/anywhere-painting-6.jpg

Width of image is the same original: https://gastonduflos.com/cdn/shop/files/anywhere-painting-6.jpg?v=1706174523&width=762

Width of image less than the original: https://gastonduflos.com/cdn/shop/files/anywhere-painting-6.jpg?v=1706174523&width=370

[GASTY]

Thank you @EBOOST could you please share a code include my other product template? https://gastonduflos.com/products/print-1

The code below is targetting only 1 product template, I have 2:

#MainContent product-recommendations.page-width,
#MainProduct-template--15488950239337__main > .page-width {
    max-width: none;
}

[EBOOST]

Hi,

May I suggest code below:

#MainContent product-recommendations.page-width,
section[id*="MainProduct-template"] > .page-width {
    max-width: none;
}

And