Image size is not same at collection page

Store Design

Topic summary

Main issue: Product images on the collection page (Dawn 5.0.0) appear in inconsistent sizes; requester wants a uniform look without editing each product. URL and a screenshot were provided (image is relevant to understand the visual issue).

Proposed fix: Add CSS in theme.liquid (above ) scoped to the collection template to force a fixed height:

  • Target: .card__inner and .card__media
  • Value: height: 269px !important

Progress and changes:

  • First attempt did not work; helper then provided a corrected snippet with the proper conditional for the collection template.
  • After the correction, desktop view is acceptable/consistent.

Current problem: On mobile, images are stretched due to the fixed height, impacting the phone preview. The requester asked for mobile-specific code to address responsiveness without stretching.

Status: Partially resolved. Desktop display improved; mobile layout remains problematic. Awaiting guidance on a responsive/mobile-specific solution (e.g., adjustments or media queries) to prevent stretching on phones.

Summarized with AI on February 7. AI used: gpt-5.
1

Hello,

Can someone help to fix the size of the images at the collection page as many of the products has different sizes and its difficult to fix them individually? The theme is dawn 5.0.0

Here is the URL https://www.cloudstore.pk/collections/boys

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

2

Please try to add this code :

Step1: Online store > Themes > Edit code > search for your theme file theme.liquid

Step2: Paste the code above the 

{% if template.name == 'collection' %}
.card__inner, .card__media {
height: 269px !important ; 
}
{% endif %}

Hope this can help you solve the issue

Best regards,

PageFly

3

Unfortunately, it’s not working.

4

Please share the code for the mobile preview as well because that got impacted.

5

hi @John_Starc i forgot the tag, please try this

{% if template.name == 'collection' %}

{% endif %}
1 Like
6

This is good to go for desktop but its impacts mobile preview as over-the-phone images got stretched.

7

Can you please help in this regard @PageFly-Victor