Images are not aligned at collection page- Dawn Theme

Store Design
1

I published a post earlier that at the collection page, images of few items are not aligned and its difficult to fix them manually by resizing them because the sources of data are different.

Need any code to fix the length for both desktop and mobile.

PS: Got help from someone but that works for desktop only and images got stretched over the phone preview.

Please help to fix the length for both devices.

Screenshot at Oct 12 01-00-29.png
Screenshot at Oct 12 01-00-29.png1142×576 269 KB

https://www.cloudstore.pk/collections/boys

2

Hi @John_Starc

This is PageFly - Advanced Page Builder. I would love to give you some recommendations

-Go to Online Store->Theme->Edit code

-Asset-> component-card.css paste the below code at the bottom of the file.

@media(min-width:768px){

.card__inner{height:300px !important}

}

@media(max-width:767px){

.card__inner{height:200px !important}

}

PageFly_0-1665764965937.png
PageFly_0-1665764965937.png1366×768 192 KB

PageFly_1-1665764985753.png
PageFly_1-1665764985753.png259×552 81 KB

Hope my solution works perfectly for you!

Best Regards;

PageFly

3

@John_Starc

oh sorry for that issue can you please try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/base.css ->paste below code at the bottom of the file.
.collection .card__inner { height: 280px;}
@media(max-width:767px) {.collection .card__inner { height: 190px;}}
4

Finally, it works. Thank you