How to change the alignment for some product images showing on little left rather than full width

Solved
Shivam97
Pathfinder
131 0 53

Hi,

I tried everything, Changed the coding for the description image alignment to max width with 0 gaping but still some of the product images in description shows left aligned, I tied changing it but no solution.

Most of old listing product have this alignment issue. how can i fix all of that product images.

URL - https://www.portronics.com/products/kronos-alpha?_pos=1&_sid=97cae6323&_ss=r

allllig.PNG

The image should be like this 

URL - https://www.portronics.com/collections/new-arrivals/products/pure-sound-101

fulll alignnne.PNG

0 Likes
Natztech
Shopify Partner
1310 360 896

hello @Shivam97 

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

@media only screen  and (min-width: 789px){
.template-product div#shopify-section-single-product-tab .page-width .collapsible-content__inner.rte .fl.product-description-details, .template-product div#shopify-section-single-product-tab .page-width .collapsible-content__inner.rte h2, .template-product div#shopify-section-single-product-tab .page-width .collapsible-content__inner.rte>div>div {
    display: inline !important;

}
}

 

Want to theme customize contact us E-mail : natztech2312@gmail.com
If helpful then please Like and Accept as Solution

PageFly Advanced Page Builder- My favorite drag and drop page builder - Visit the Shopify app store
Shivam97
Pathfinder
131 0 53

Thanks @Natztech 

It worked.

But I started getting gapping issue between images as shown in images.

gappa.PNG

URL - https://www.portronics.com/products/kronos-alpha?_pos=2&_sid=fa042bccc&_ss=r

 

0 Likes
Shivam97
Pathfinder
131 0 53

It should be 0 gapping between them.

0 Likes
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:

.collapsible-content .collapsible-content__inner.rte > div > div > div, .collapsible-content .collapsible-content__inner.rte > div > div > p {
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

It pasted it but it didnt worked. Still gaping is there. @Pallavi. Hi @Pallavi 

gupp.PNG

0 Likes
Natztech
Shopify Partner
1310 360 896

hello @Shivam97 


please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

@media only screen  and (min-width: 789px){
.collapsible-content .collapsible-content__inner.rte > div > div > div, .collapsible-content .collapsible-content__inner.rte > div > div > p {
    margin: 0;
    padding: 0;
}
.collapsible-content .collapsible-content__inner.rte > div > div > div, .collapsible-content .collapsible-content__inner.rte > div > div > p >img {
    display: flex;
}
}

 

Want to theme customize contact us E-mail : natztech2312@gmail.com
If helpful then please Like and Accept as Solution

PageFly Advanced Page Builder- My favorite drag and drop page builder - Visit the Shopify app store
Shivam97
Pathfinder
131 0 53

Thanks it worked @Natztech . But 3 down images still shows gaping between them.

URL - https://www.portronics.com/products/kronos-alpha?_pos=2&_sid=996f3965d&_ss=r

 

0 Likes