Product Grid Full Widht - RIDE Theme

[GASTY]

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

Please help! Thank you very much!

[AnneLuo]

Hi, @GASTY 

Please share the store URL so that I can assist you.

[GASTY]

Hi @AnneLuo , link for this is: https://gastonduflos.com/products/print-1 and any other product in the shop

[AnneLuo]

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code above the </head> tag

<style>
@media screen and (min-width: 1024px) {
    .page-width {
        max-width: 100% !important;
    }
}
</style>

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

[GASTY]

Thank you @AnneLuo this code worked well but it's targetting all the pages acros my website. I do not want to affect the widht of pages like my about, contact and other blog pages. Thats why I only wanted to target the product and collection pages. Any chance we can achieve this ?

[AnneLuo · Accepted solution]

Sure. Replace the code above with the new code

{% if template == 'product' or template == 'collection' %}
<style>
@media screen and (min-width: 1024px) {
    .page-width {
        max-width: 100% !important;
    }
}
</style>
{% endif %}

[GASTY]

Thank you @AnneLuo Ill mark your answer as solution, but unfortunately won't work as I expected as for some reason the images are showing pixelated even when their resolution is way bigger than the actual section. 

Also, the templates for the product pages are as below, any chance you could edit the code so it works on all of them for future reference? Ill see why the images are looking pixelated first.

[AnneLuo]

Can you describe your expection?

[GASTY]

Thank you @AnneLuo . I achieved it for the collection page with the below code, any chance we can use the same css for the product information/photo and related products containers?:

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