How do I make a group of images the same height on mobile on a specific page?

Site URL: https://www.fortsferryfarm.com/journal/our-favorite-kitchen-tools

Hi! I used the squarespace cropping handle tool to resize the kitchen tool images on the left to be the same height as the text blocks on the right which looks good on desktop, but then I want all these photos to have the same height on mobile — is that something that can be done with custom css? If so, how?

Thank you!

You want image to be equal height on this view right? since image ratio is different, make them same height may reduce width of some,

13 hours ago, bangank36 said:

You want image to be equal height on this view right? since image ratio is different, make them same height may reduce width of some,

I would like the width to stay the same, so pretty much have all the kitchen tool images to be the same size/ratio on mobile.

13 hours ago, bangank36 said:

I tried to make their ratio as 75%, you can feel free to try, Copy to Design->Custom Css

Your site is great, which template you used?

@media only screen and (max-width: 600px) {
  #item-5f9b1c8421bce951fa5c24e4 .sqs-block-image-figure .v6-visually-hidden + div {
    padding-bottom: 75% !important;
  }
  
  #item-5f9b1c8421bce951fa5c24e4 .sqs-block-image-figure .thumb-image {
    top: 50% !important;
    height: auto !important;
    transform: translateY(-50%)
  }
}

Thank you! This works great! 

And thanks for the kind words as well. The template we're using is Foster. 

Ould a person be able to proportion a code for stacking the mobile classes menu? I see you acquire it to paintings to your website Simon for knives. The code shared with the aid of birdmade is not working for me.

On 9/6/2021 at 1:02 AM, njmkse333 said:

Ould a person be able to proportion a code for stacking the mobile classes menu? I see you acquire it to paintings to your website Simon. The code shared with the aid of birdmade is not working for me.

Can you share link to your site? We can check easier