FROM CACHE - en_header

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

Solved
Shivam97
Trailblazer
165 0 63

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

Accepted Solution (1)

Accepted Solutions
ZestardTech
Shopify Expert
3733 631 860

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

View solution in original post

Replies 7 (7)
ZestardTech
Shopify Expert
3733 631 860

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
Trailblazer
165 0 63

thanks it worked super good.

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

gaapppp.PNG

ZestardTech
Shopify Expert
3733 631 860

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
Trailblazer
165 0 63

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

Shivam97
Trailblazer
165 0 63

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

means a lot. 

ZestardTech
Shopify Expert
3733 631 860

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
Shivam97
Trailblazer
165 0 63

Hi @ZestardTech , 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.