How to adapt images in api calls?

Question

This is my first time posting anything here, so if I'm missing something, please let me know! Ok, so my problem is that the images in the category page don't fit with each other and no longer line up. This happened after I learned a little JavaScript and getting images from API calls. Now they don't look that good anymore...especially in mobile view. How can I make them the same size? BTW, I'm a complete noob. Here is the link to my page: https://lovely-croissant-3cceca.netlify.app/

I tried fixing it with CSS, but it no longer "reacts" when I change something. Mobile view in category page, image too tall. However, when I try to lower them in the media query, the desktop version also changes. I know this is probably something I'm doing when I'm experimenting with javascript. I also can't change the name "test" to something else because everything will be disrupted...

Answer 1

The important thing is the output, instead of calling the image via API, we can use CSS to handle the result.

The movie title pushes the images down because they are in the same container so we have to give them height.

The images have different proportions, so you can use object-fit: cover to crop the image at the maximum size with the minimum image height.

On mobile: You need to set overflow to visible and remove the padding child from .container- too True (otherwise there would be multiple extra spaces) and only added to the parent.

Something like this would be done:

.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;
       }
    }