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.
I removed d-flex and that fixed it. There was an extra d-flex that I wasn’t aware of. You can see my codepen with the link above.
1 Like
There’s still a problem with the layout. When I make my browser (viewport) smaller, the two images in the second row sit on top of each other. I want them to float to the end instead. I added float-sm-end to the classes but it didn’t help.
I tried changing the column widths by adding col-sm-4 to each of the columns in the second row to allow for more room for the images but this didn’t work either.