How do I make my product pages full width (OOTSB Turbo)

[SM212]

Hi there,

I would like to make the layout of my product pages full width.

I have found that editing the code  below makes the whole site full width but can't figure out how to only make the product pages full width. Please help

site is www.nordichealth.co.nz

.section {
max-width: 100%;
width: 100%;
margin-left: auto;
margin-right: auto;
}

[vinh0225]

Hi @SM212 

Please try this:

Step 1. Remove the code snippet you described from its original file.

Step 2. Please add this snippet before </head> in the layout/theme.liquid.

{% if template.name == 'product' %}
  .section {
    max-width: 100%;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
{% endif %}

 Please let me know if you have any concern.

Regards,

Vinh

[SM212]

Thanks for your reply Vinh0225, But unfortunately it hasn't changed the width of any of the product pages 

[vinh0225 · Accepted solution]

Sorry, I missed <style> tag. Please replace with this:

{% if template.name == 'product' %}
<style>
  .section {
    max-width: 100%;
    width: 100% !important;
    margin-left: auto;
    margin-right: auto;
  }
</style>
{% endif %}

[SM212]

Thanks so much 😃