Solved

Align products pics in collections

Alliance
Trailblazer
500 8 26

HI Guys, 

 

I have few pics in collections that are not aligned as shown bellow, how can that be fixed!

 

Alliance_0-1671033226127.png

Thank you

allianceautoproducts.com

Accepted Solutions (2)

JHKCreate
Shopify Expert
3571 639 916

This is an accepted solution.

Hi @Alliance 

 

The reason behind this stems from the fact that the misaligned image has different dimensions than the rest, hence the breakup.

 

You have two solutions here:

  • Resize the image to match the others (cleanest way)
  • Fix a specific image height across all images using code (could lead to more white padding/anomalies to make all images fit under one container)
Did we solve your issue? Like & Mark As Solution to help the community
Should you need any direct help: contact@jhkcreate.com

Learn more about us: jhkcreate.com

View solution in original post

PageFly-Victor
Shopify Partner
7865 1785 3050

This is an accepted solution.

Hi @Alliance 

This is Victor from PageFly - Landing Page Builder App.

 

You can try this code by following these steps:
Go to Online store => themes => actions => edit code  and add this code on file theme.scss.css

#ProductCardImageWrapper-collection-template-4513008681100{
height: 250px;
}


Or on file theme.liquid

PageFlyVictor_0-1671041710821.png

 



<style>
#ProductCardImageWrapper-collection-template-4513008681100{
height: 250px;
}

</style>



Hope this answer helps.
Best regards,
Victor | PageFly

View solution in original post

Replies 3 (3)

JHKCreate
Shopify Expert
3571 639 916

This is an accepted solution.

Hi @Alliance 

 

The reason behind this stems from the fact that the misaligned image has different dimensions than the rest, hence the breakup.

 

You have two solutions here:

  • Resize the image to match the others (cleanest way)
  • Fix a specific image height across all images using code (could lead to more white padding/anomalies to make all images fit under one container)
Did we solve your issue? Like & Mark As Solution to help the community
Should you need any direct help: contact@jhkcreate.com

Learn more about us: jhkcreate.com

PageFly-Victor
Shopify Partner
7865 1785 3050

This is an accepted solution.

Hi @Alliance 

This is Victor from PageFly - Landing Page Builder App.

 

You can try this code by following these steps:
Go to Online store => themes => actions => edit code  and add this code on file theme.scss.css

#ProductCardImageWrapper-collection-template-4513008681100{
height: 250px;
}


Or on file theme.liquid

PageFlyVictor_0-1671041710821.png

 



<style>
#ProductCardImageWrapper-collection-template-4513008681100{
height: 250px;
}

</style>



Hope this answer helps.
Best regards,
Victor | PageFly

Alliance
Trailblazer
500 8 26

Hi Victor,

 

I created a section using your app, but I was not able to show the discounted prices as well. How that can be fixed?

Alliance_0-1671047638574.png

 

Thank you,

allianceautoproducts.com