Full Width Product Description Photos - Debut

[STIFCforum]

Hello Shopify community,

I need help changing just the resolution of the product photos that I put in the product description to the full width of the page.

I'd like to leave the text and everything else on the product page the same resolution. I only need to change the resolution of the photos posted in the description.

As you can see from the picture I only want the photos under the tabs to be full width resolution (not the text if possible)

Here is a link to this product page:

https://stifc.com/products/usb-air-humidifier-colorful-cup-mini-aroma-water-diffuser-led-light-ultra...

Any help is highly appreciated! 

[KetanKumar]

@STIFCforum 

Thanks for the post try this

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.

this code applies after 5-6 second 

.product-template__container {
max-width: 100%;
}
.product-single {
max-width: 1200px;
    margin: 0px auto;
}

[suyash1]

@STIFCforum - your task will need multiple css settings, I can show you screenshot of how it will look, you can contact me on my given email below.

[MS-WEB-DESIGNER]

Dear @STIFCforum 

Hope the following suggestions will help you

• From your Shopify admin, go to Online Store > themes
• Locate your current theme and then click Actions > Edit code
• After that in the Assets folder, click to open your theme.scss.liquid file
• Go to the very bottom of this file and paste the following code:

/* Start */
.product-template__container {padding: 0 !important; margin: 0 !important; max-width: 100% !important;} 
.product-template__container .product-single,
.product-template__container .product-single__description p,
.product-template__container .product-single__description .station-tabs
 {max-width: 1200px;margin: 0 auto;}


@media only screen and (max-width: 749px) {
.product-template__container .product-single .product-single__media-group {padding-left: 0 1important}
.product-template__container .product-single,
.product-template__container .product-single__description p,
.product-template__container .product-single__description .station-tabs {padding: 0 22px !important}
}
/* End*/

• Ensure that the code was copied exactly from this guide and pasted correctly, making sure no characters or symbols are missing.
• Save and check your theme by refreshing it.

If you still need help you can contact us by using the link or email given at signature.