How can I align product pictures in the Dawn Theme?

Hi

I have a problem with the dawn Theme, the pictures in the collection overview have different sizes. See Screenshot.

I saw a few queestions related to this topic, however I didn’t find the solution for me. Does someone have an idea how to fix this?

@AVADA

1 Like

@Luzy

Welcome to the Shopify community!
Thanks for your good question.

Please share your store URL.
So that I will check and let you know the exact solution here.

her the URL: https://www.luzy.store/

1 Like

Hi @Luzy ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/component-card.css->paste below code at the bottom of the file:
.card-wrapper .media--transparent {
	 padding-bottom: 130% !important;
}
 .card-wrapper .media--transparent img {
	 object-fit: cover !important;
	 object-position: bottom center !important;
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

@Luzy

thanks for url can you try this code

  1. Go to Online Store-> Theme->Edit code
  2. Asset->/base.css ->paste the below code at the bottom of the file.
.card--product .media--portrait img { object-fit: cover;}
.card--product .media--portrait {padding-bottom: 120%;}

Thanks a lot !! I spended the whole day trying to solve it and with this snipped it was solved in minutes !!!

1 Like