weird placement of some products on the website

Store Design
, ,

Topic summary

A user reported misaligned product displays on their collection page, where some items appeared taller than others, creating an inconsistent grid layout. Screenshots revealed the issue stemmed from mixing square and portrait-oriented product images.

Root Cause:
Product cards maintain uniform width but vary in height based on image aspect ratios, causing portrait images to display taller than square ones.

Solution Provided:
Two CSS-based fixes were offered:

  • Adding custom CSS code to the theme.liquid file (above the </body> tag)
  • Using CSS rules to force uniform aspect ratios and contain image fitting:
.card__inner.ratio {
  --ratio-precent: 100 !important;
}
.card__inner img {
  object-fit: contain !important;
}

Outcome:
The original poster confirmed the solution worked successfully. The discussion is resolved.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

Hello, could anyone explain why some of my products have incorrect placement on the website? is there a code for that to fix it? it doesn’t look good

thanks in advance

Zrzut ekranu 2025-03-21 o 16.20.27.png
Zrzut ekranu 2025-03-21 o 16.20.27.png2880×1800 396 KB

Zrzut ekranu 2025-03-21 o 16.20.41.png
Zrzut ekranu 2025-03-21 o 16.20.41.png2880×1800 427 KB

Zrzut ekranu 2025-03-21 o 16.20.56.png
Zrzut ekranu 2025-03-21 o 16.20.56.png2880×1800 386 KB

1 Like
2

Hey @Monness

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1742577272506.png
Moeed_0-1742577272506.png809×744 123 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like
3

Hi there. Some of your product images are square and some are portrait.

All product card images have the same width, so portrait ones will be show taller.

You may check this post – it is about the same issue: https://community.shopify.com/c/shopify-design/images-in-dawn-theme-are-not-the-same-size-or-too-large/m-p/2985676#M781637

But your theme has different name, so may have some differences…

If your theme does not have similar selector, you can another rule to the code suggested there, so it looks like this:

.card__inner.ratio {
  --ratio-precent: 100 !important;
  background: transparent;
}

.card__inner img {
  object-fit: contain !important;
}
1 Like
4

Hi, thank you for your reply. It worked like a charm! Thank you so much

1 Like
5

Thank you for your reply. I’m glad to hear that the solution worked well for you. If you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.