Product images are bigger on the last page | DAWN theme

Shopify Discussion
, , , ,
1

Hi everyone,

I’m using the Dawn theme for www.mahru.in and I am running into a strange issue on my collection page. The product card images look perfectly fine on pages 1 through 7 (or so), but on the last page, the images become extremely tall/elongated — much taller than the rest.

All images are uploaded at similar dimensions and the issue only affects the last page of the collection (93 products total).

I’ve tried changing the Image Ratio setting in the theme customizer but the option doesn’t seem to be having an effect.

Has anyone run into this? Is there a CSS fix or a Liquid/theme file edit that can force a consistent aspect ratio across all collection pages?

Any help appreciated!

2

Your theme has some JS code added which loops over collection products and sets fixed height for product images.

You may notice that images change proportions if you make your browser wider or narrower.
Probably JS code runs too early or too late?

I’d add something like this to the “Custom CSS” under “Theme settings” (cog icon) in “Edit theme”.

.card--card,
.card__inner.ratio {
  --ratio-percent: 150% !important; /* lock product card image aspect ratio */
}

.card__inner.ratio {
  height: auto !important;
}

Maybe remove the JS code too.

3

Thanks @tim_tairli this worked. I might have added some JS last year when I was building the site. It seems to be working

4

The JS code, if you’d want to remove it is this:

<script>
window.addEventListener('load', function() {
    const boxes = document.querySelectorAll('.card__inner.ratio');
    let maxHeight = 0;

    // Find max height
    boxes.forEach(box => {
        box.style.height = 'auto'; // Reset height
        if (box.offsetHeight > maxHeight) {
            maxHeight = box.offsetHeight;
        }
    });

    // Apply max height
    boxes.forEach(box => {
        box.style.height = maxHeight + 'px';
    });
});
</script>

It’s likely is in layouts/theme.liquid

5

Hi @tim_tairli facing another issue. https://mahru.in/ - some of the images of the collections have changed sizes. any idea why this happened?

Everything was displaying perfectly until today, but now one product card is rendering at a different apparent size while the others remain uniform.

A few things I’ve already checked:

• The Featured Collection Image Ratio setting (Portrait/Adapt) doesn’t fix it. I need it to be set to adapt (was working fine yesterday)
• All cards use the same snippet and markup.
• This only affects one lifestyle image; the others display correctly.
• The issue is only on the homepage Featured Collections, not on the collection pages.
• I haven’t intentionally changed the Featured Collection or card-product-featured.liquid today.

The first two cards look correct, but the third appears a different size even though it’s in the same grid.

Has anyone seen this before? Could this be caused by the image itself (aspect ratio/canvas size), or is there something in Dawn’s card rendering that could cause a single image to display differently?

6

Okay i think i fixed it. CSS worked - .card–card,
.card__inner.ratio {
–ratio-percent: 150% !important; /* lock product card image aspect ratio */
}

.card__inner.ratio {
height: auto !important;
}