I am using Shopify theme, I am displaying four product in each row. Everything is working perfectly except product column height. I need the equal height of each column. I tried display: table
the parent class and display:table-cell
to child class but still not working. Also tried display:flex
I am sharing the link to code because of my code huge and not allowing me to upload here.
3
Answers
Just add a style to the
grid-view-item__link
likeChange the 400 to whatever height you want.
Here is the fiddle
Okey, that’s the best I can do for now.
https://jsfiddle.net/a8ag2270/49/
It can probably be done with a lot fewer styles (or maybe not), but I like flexboxes and working with them, so I used that.
What you need to do on your own is to set min-height to title, description etc. if you want them to be “aligned horizontally” (can’t find the right words for that) with each other.
The above styles put the price down, right above the button. If you don’t want that behaviour, you can use this:
or this:
add Below code in your css file: