Inconsistent image sizing

Store Design

Topic summary

A user is experiencing issues with inconsistent image sizing on their collection page, where CSS code pasted into theme.css and base.css files isn’t taking effect.

Problem identified:

  • Images display at varying heights/sizes instead of uniform dimensions
  • Previous CSS attempts had no visible impact on the website

Solution provided:

  • Add custom CSS targeting .card__inner.ratio elements
  • Set --ratio-percent: 100% !important; to standardize aspect ratios
  • Apply object-fit: contain; to image elements for consistent sizing
  • Code should be added to theme’s custom CSS settings or relevant sections

Status: Issue appears resolved, with the original poster expressing gratitude for the assistance.

Summarized with AI on November 8. AI used: claude-sonnet-4-5-20250929.
1

I have tried pasting codes in theme.css and base.css but it does not affect my website at all

preview:

https://ua339d7nn4j8jnrp-86741057877.shopifypreview.com

2

So you’re seeing this:

Screenshot 2024-06-21 at 12.59.23 AM.png
Screenshot 2024-06-21 at 12.59.23 AM.png1021×962 169 KB

but want to see this:

Screenshot 2024-06-21 at 12.59.38 AM.png
Screenshot 2024-06-21 at 12.59.38 AM.png1021×962 201 KB

You can try adding code like this to your sections or theme Custom CSS setting:

.card__inner.ratio {
  --ratio-percent: 100% !important; /* can change the number to your taste */
}
.card__inner.ratio img {
  object-fit: contain;
}
1 Like
3

Thank you very much for you’re help. I appreciate it for taking time to help me.

4

Thank you very much