Make the size of Product Page Full Width with sample

[Mabinibooks]

 Hello, good evening!

I just need assistance regarding the product page Width, how can I make it full Width similar to this (First image)

1st Image

This is the current look ( 2nd Image)

2nd Image

This is the store and the sample product page - https://valiantactiveclothing.com/products/the-ivory-set

Please assist.

Thank you so much!

[rajweb]

Hey @Mabinibooks ,

Add CSS for full width: You can add a custom CSS rule to make the product page full width. Open the theme.scss.liquid or theme.css file (usually located under the Assets folder), and add the following CSS at the bottom:

.product-page-container {
   max-width: 100% !important;
   padding: 0 !important;
   margin: 0 auto !important;
}

.product-template__container {
   width: 100% !important;
   max-width: 100% !important;
   padding: 0 !important;
}

Save the changes and preview your product page to ensure the full-width design is working.

If your theme is structured differently, let me know and I can guide you further.

[Mabinibooks]

Thank you, I have another request

Would you be able to customized it like this? A smaller Product information column

This is their website - https://www.oneractive.com/products/effortless-seamless-leggings-blackberry-purple?nosto=frontpage-n...

Thank you!

[ZestardTech]

Hi @Mabinibooks 

Please share your store URL and password.
So that I will check and let you know the exact solution here.

[Mabinibooks]

Hello, thanks for responding. Sorry I was not able to include it

This is the store and the sample product page - https://valiantactiveclothing.com/products/the-ivory-set

Thank you!

[Tech_Coding · Accepted solution]

Hello @Mabinibooks 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
  product-info .page-width {
      max-width: 100% !important;
      padding: 0 !important;
  }
</style>

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

[Mabinibooks]

Thank you, it worked, I have another request

Would you be able to customized it like this? A smaller Product information column

This is their website - https://www.oneractive.com/products/effortless-seamless-leggings-blackberry-purple?nosto=frontpage-n...

Thank you!

[Tech_Coding]

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
@media only screen and (max-width: 1370px) and (min-width: 992px) {
   .oa-single-product_image-container.oa-single-product_image-container.visible-md.visible-lg {
      flex: 2 !important;
      max-width: 76% !important;
  }
  #oa-fashion .oa-single-product_meta-container {
      margin-left: 10px !important;
      flex: 2 !important;
      max-width: 23% !important;
  }
}

 .oa-content .container {
    width: 100% !important;
  }
</style>

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

[Mabinibooks]

Thanks for responding again, this time it did not work.

I may have confused you, I mean I want the code to be implemented on this product page - https://valiantactiveclothing.com/products/the-ivory-set

[Made4uo-Ribe]

Hi @Mabinibooks 

Would you mind to share your Store URL website? with password if its unpublish. Thanks!

[Mabinibooks]

Hello, thanks for responding. Sorry I was not able to include it

This is the store and the sample product page - https://valiantactiveclothing.com/products/the-ivory-set

it was already fixed now, but I have another request

I have another request

Would you be able to customized it like this? A smaller Product information column

This is their website - https://www.oneractive.com/products/effortless-seamless-leggings-blackberry-purple?nosto=frontpage-n...

Thank you!