How in Increase to Max Width and 0 gaping between between images

Solved
Shivam97
Pathfinder
131 0 53

Hi,

How to Increase the images to max width with no gaping between two images as shown in images.

gaping.PNG

 

Product link -  https://www.portronics.com/collections/new-arrivals/products/konnect-b

0 Likes
Pallavi
Shopify Expert
2174 354 464

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset >theme.scss.css and paste this at the bottom of the file:

div#shopify-section-single-product-tab .page-width {
max-width: 100% !important;
width: 100%;
padding: 0;
}

div#shopify-section-single-product-tab .page-width img {
width: 100%;
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
Shivam97
Pathfinder
131 0 53

thanks it worked super good.

But the gap between images still there as shown in image.

gaapppp.PNG

Pallavi
Shopify Expert
2174 354 464

This is an accepted solution.

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset >theme.scss.css and paste this at the bottom of the file:

div#shopify-section-single-product-tab .page-width .collapsible-content__inner.rte .fl.product-description-details, div#shopify-section-single-product-tab .page-width .collapsible-content__inner.rte h2, div#shopify-section-single-product-tab .page-width .collapsible-content__inner.rte>div>div {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
Shivam97
Pathfinder
131 0 53

Thanks that work perfectly, But it hide some images. How to fix that?

Shivam97
Pathfinder
131 0 53

Thats issue from my end, I got it thanks @Pallavi.

means a lot. 

Pallavi
Shopify Expert
2174 354 464

Thank you for your response. It's good to know that it's worked for you. Kindly feel free to get back to me if you need any further assistance.

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
0 Likes
Shivam97
Pathfinder
131 0 53

Hi @Pallavi , just have a question, If I increase the width with your code, does it help with increase in just width or overall image got proportionally increase. Cause some of the Image i faced stretched pixelated issue. How I can make it proportional bigger from all dimension to the edge of the screen so it doesn't get pixelated. 

0 Likes