Product Grid Full Widht - RIDE Theme

Solved

Product Grid Full Widht - RIDE Theme

GASTY
Excursionist
38 0 4

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. 

 

Screenshot 2024-06-17 at 8.38.12 am.png

 

Please help! Thank you very much!

Accepted Solution (1)
AnneLuo
Shopify Partner
766 145 158

This is an 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 %}
If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   

Buy Me A Coffee

View solution in original post

Replies 8 (8)

AnneLuo
Shopify Partner
766 145 158

Hi, @GASTY 

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

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   

Buy Me A Coffee

GASTY
Excursionist
38 0 4

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

AnneLuo
Shopify Partner
766 145 158

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!

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   

Buy Me A Coffee

GASTY
Excursionist
38 0 4

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
Shopify Partner
766 145 158

This is an 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 %}
If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   

Buy Me A Coffee

GASTY
Excursionist
38 0 4

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.

 

Screenshot 2024-06-17 at 12.09.23 pm.pngScreenshot 2024-06-17 at 12.10.34 pm.png

AnneLuo
Shopify Partner
766 145 158

Can you describe your expection?

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   

Buy Me A Coffee

GASTY
Excursionist
38 0 4

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%;
}