My first time posting anything here so if i am missing something please tell me! Ok, so my problem is that the images in my categories page don't fit eachother and does not align anymore. This happened after I learned a little javascript and got the images from an API call. Now they don't look so good anymore... especially in mobile view. How can I make it so they are all the same size? I'm totally a rookie by the way.
Here is the link to my page: https://lovely-croissant-3cceca.netlify.app/

I tried fixing it with CSS but it doesn't "react" anymore when I change something. The mobile view in the categories page, the images are to high. But wwhen I try to lower them in the media queries the desktop version also changes. I know it likely something with the <div id="test"> i made when I was trying out javascript. I also cant change the name "test" to something else, because the everything gets disturbed...

The output's what matters, not the fact that the images are called through API, we can address the result with CSS.

The film titles push the images down, because they are in the same container, so we have to give them a hight.

The ratio of the images differs, so you could use object-fit: cover to crop the images at a maximum size of the smallest image's height.

On mobile: you need the overflow to be set to visible, and take out the padding from the .container-child too (there are multiple extra spaces otherwise), and add only to the parent.

Something like this, would do it:

    .container-child p {
       height: 50px;
       text-align: center;
       display: block;
   }
    /*from here the responsive code*/
    @media (max-width:1624px){
        .container-child img {
          object-fit: cover;
          max-width: 500px;
          max-height: 709px; /*the smallest image*/
          width: 100%;
          height: 100%;
        }
    }
    @media (max-width: 768px) {
    .container-child {
        padding-top: 0em; 
        display: inline-block;
        text-align: center;
       }
       #test {
        margin-top: 130px;
        display: inline-block;
        text-align: center
       }
       html, body {
        overflow: visible;
        background: #000;
       }
    }