Collection Hero image not keeping the proportions on mobile

Store Design
1

Hi,

I’m trying to fix the issue with the collection hero image getting cropped on mobile or when the screen is narrow. How do I make the image stay square all the time and just become smaller?

Thank you

2

@MilpaliSwim

Please share your store URL!

Thanks!

3

https://www.milpali.com/collections/first-nations-swimwear

4

@MilpaliSwim

Please share the screenshot of what you want!

Thanks!

5

I would like this image to be the original proportions, which in this case is square.

Screenshot 2023-07-09 at 10.07.30 pm.png
Screenshot 2023-07-09 at 10.07.30 pm.png1284×1472 369 KB

6

@MilpaliSwim

Please add the following CSS code to your assets/base.css bottom of the file.

@media screen and (max-width: 749px){
.collection-hero__image-container {height: 35rem !important;}
}

Thanks!