HI Guys,
I have few pics in collections that are not aligned as shown bellow, how can that be fixed!
Thank you
Topic summary
A user is experiencing misalignment issues with product images in their collection page, where one image appears out of alignment with others.
Root Cause:
- The misaligned image has different dimensions than the other product images, causing the layout to break.
Proposed Solutions:
- Resize the problematic image to match the dimensions of other images (cleanest approach)
- Apply CSS code to fix a specific image height across all images, forcing them to fit within one container (may introduce white padding/spacing)
Technical Implementation:
- A PageFly representative provided specific CSS code to set a fixed height (250px) for the collection template
- Code can be added to either theme.scss.css or theme.liquid file
- Instructions include navigating to Online store → Themes → Actions → Edit code
Follow-up Issue:
The original poster also mentioned difficulty displaying discounted prices in a section created with the PageFly app, though this remains unresolved in the thread.
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)
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
#ProductCardImageWrapper-collection-template-4513008681100{ height: 250px; }
Hope this answer helps.
Best regards,
Victor | PageFly
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?
Thank you,