Image height not working

Same HTML as previously fixed by lasjorg but now the images have different dimensions and it’s not scaling correctly. The images of the person in the second and third rows are too short and the image of the food in the second row is too tall. If I apply min-height: 170px!important; to the thumb_recipe class, these two problems get solved, however they images don’t scale when the browser is made smaller. They remain 170px tall. Using max-height doesn’t work either. See the code pen here: https://codepen.io/makamo66/pen/YzbxErv

Hi @makamo66

Instead of using fixed units such as px, consider using relative units such as vh or rem for the max-height property value.

I tried 5rem.

Happy coding

Thanks, Teller. I added max-height: 6em!important; to the thumb_recipe class for my codepen and it adjusted the height of the images but now there’s a wide gap across the width of the span at the end of each row. I changed the cols to 5, 5, 1, 1 for the first row but there’s still a gap at the end of the row. https://codepen.io/makamo66/pen/YzbxErv

Hi @makamo66

It looks like the div elements are centering the child elements.
Plus, the columns in the span elements are adding to the complexity.

Happy coding

If I add float-end to the images in the first and third row, the images get floated correctly to the end of the rows. When I add float-end to the row with two images, it doesn’t work. Take a look at the link to the code pen above. I added clearfix to the container and removed d-flex as well.