I’m working on a website and it has some category pages which feature several products each. The products are in a grid and each of them has a product image, a background, and a bar at the bottom with the product’s name.
Some product images have a portrait aspect and some landscape. My problem is with the images that are in landscape because they don’t fit the entire height of their container (nor do I want them do, cropping isn’t an option), and thus the bottom bar with the product name moves up to the bottom of the image instead of staying at the bottom of the container.
I managed to keep the bar at the bottom of the container by positioning it absolute and putting it at the bottom of the grid, and it worked great on single row grids, but on smaller screens when multiple rows are created, the bars go down to the bottom of the second row, so this isn’t a solution.
I’m hoping someone might have a suggestion that could help me.
Here’s a read-only link to a category page where you can see the issue: Webflow - Copy of Criterionconnex