Need some help with a blog project!

Code Feedback
1

Hello all,

Hope everyone is doing well. I am having some trouble with a project that I’m working on. I am trying to create an anime blog, and I am having an issue with grids in CSS. I am trying to put 5 images in the title area of the grid, but having trouble with the spacing. They also seem to come out of the grid when the screen gets smaller. Any feedback would be appreciated. It is a bit rough, because I am trying to get back into coding after a month off.

Thank you.

https://codepen.io/Merc923/pen/LYVoJRP

2

If you want the images to be responsive then you need to set the width on them in a unit that supports responsiveness (such as a percentage). Right now all of your images have their width set in pixels in the HTML. Use CSS to override that.

3

Move the .grid-images class from the figure elements to the img elements.

When using object-fit you can give the images a fixed height, which may or may not work great depending on the differences in image dimensions.

.grid-images {
  max-width: 100%;
  height: 250px;
  object-fit: cover;
}