Grid cropping image?
https://www.mottandbow.com/pages/the-best-relaxed-fit-t-shirt-for-womens?_ab=0&_fd=0&_sc=1&preview_theme_id=148521779388
In this page, in the component "One or Another" in mobile view the main images are not having the same size, even thought they are the same image, they have the same grid column fraction
Mott & Bow
The best relaxed fit t shirt for womens
Explore premium denim, tees, polos, loungewear, jackets & more—luxuriously soft, expertly crafted, and always stylish. Free shipping over $150.
11 Replies
Holy hell, that console is chatty
hahaha i also hate that but the other developers leave it like that so I won't touch it
So your question is what, exactly? Why they're different sizes on the page when they're the same grid locations and image URL?
Yep
They don't have the same spacing in the grid even thought I have set it to have the same spacing as well
The images are conforming to their parent
picture elements that are different sizesit's the fixed width on
.ooa__thumb that is causing the issue
even tho you set 2 equal columns they are not evenI don't set the sizes for this element, how can they be different? Should I set a size they have the asme size?
that is not where the issue is? those thumbs images are rendering and having the right size
but they are breaking the grid
you set two equal columns with 1fr 1fr but they are not equal that is why one of the pictures is smaller
you could also set the
align-items: stretch; for the grid now it's set to startthank you so much!
Props to @Mannix for being able to wade through all those weird classes and figure it out đź‘Ź