Images on Home page on Mobile are too big

Hi everyone ! 

I set up a home page with a ken burn effect (9 photos) 

It's fine on a computer, even if the images are a little cropped.

But I have a problem on Mobile phones: 

The home page cropped dramatically the images 😱

How can I either, make the images not cropped on mobile? , or make a different home page on mobiles, without changing the homepage on computers?

here are : one screenshot of my homepage on a mobile and another on the computer 

Thank you for helping me 🙏

Add to Design > Custom CSS

@media screen and (max-width:767px) {
.slideshow {
    height: 30vh !Important;
}
}

Thank you so much for your answer  !! 🙏  💖 it worked !

The background color now is white and it's not very nice 

Do you know how I can change the color of the background to full black ?

I promess, it's my last question 😋

6 hours ago, tuanphan said:

Add to Design > Custom CSS

@media screen and (max-width:767px) {
.slideshow {
    height: 30vh !Important;
}
}

 

Thank you so much for your answer !! 🙏 💖 it worked ! The background color now is white and it's not very nice Do you know how I can change the color of the background to full black ? I promess, it's my last question 😋

On 2/10/2023 at 9:19 AM, tuanphan said:

Add to Design > Custom CSS

@media screen and (max-width:767px) {
.slideshow {
    height: 30vh !Important;
}
}

 

1 hour ago, tuanphan said:

Use this new code

@media screen and (max-width:767px) {
.slideshow {
    height: 30vh !Important;
}
body.homepage {
    background-color: black;
}
div#block-yui_3_17_2_1_1538049733920_4401 {
    padding: 0px !important;
}
}

 

Thank you soooo much !!! you made my day 💖