Full Width Product Description Photos - Debut

STIFCforum
Excursionist
19 0 10

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.

Capture.JPG

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
Shopify Partner
14338 1669 5164

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

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
suyash1
Shopify Partner
1995 205 304

@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.

you are welcome to contact me.
My email - suyash.patankar@gmail.com

#1 page builder app on Shopify - for FREE! PageFly

My timezone is GMT+5:30
0 Likes

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.

Best Regards
MS Web Designer| MS Web International | Task4Store
Contact Us: https://www.task4store.com/pages/contact-us OR task4store@mswebdesigner.com
Was our reply helpful? Please Like or Accept solution
0 Likes