Img not staying contained within css grid

I am trying to build my portfolio page but my images are not staying contained within the grid cells and are overlapping other elements.
Any mentors out there looking for a mentee??
I have tried using object-fit but it isn’t working so I have made a mistake somewhere.
Any help is greatly appreciated!

Probably overflow. Gotta codepen?

1 Like

I have started over from scratch following a tutorial but I would still like to know what your solution is.
codepen is : https://codepen.io/simpson-ic/pen/XveNKM?editors=1100
Thanks

Where’s the overlap?

Without seeing the original problem it’s kind of hard to give you any solution.

when the viewport height is reduced the img’s push down outside of their box and the text on the left overlaps the img.
I just started learning to code and attempted a project that is probably a bit complex given my experience but I would like to know where I went wrong.

sorry, I should have copied in the codepen and explained the problem in more detail originally

Tall and narrow viewport the text reflows and becomes taller than the rest of the row. Grid is a flexible container and will try to make things fit. Normally you would have a media query with a slightly wider width and change the layout before that happens.

Ok, that makes sense. I have just run into the same issue on my second attempt at the portfolio page. I have some media queries but obviously not the right ones.

Have you got any suggestions for the right media query for this problem?

https://codepen.io/simpson-ic/pen/rXYVEG?editors=1100