Resizing Page, Slide, and Image

Site URL: https://www.blackcatdesign.co.th/

When I switch from desktop to mobile, it will cut the image not resizing. I prefer all images and slides shrinking. Could you help me on the code?

The current mobile situation will be as the picture 3.png. I would like to get as the picture 1.png.

Add to Home > Design > Custom CSS

/* resize home banner */
@media screen and (max-width:767px) {
.homepage #page section:first-child {
    min-height: 20vh;
    height: 40vh;
    margin-top: 150px;
}
}

@tuanphan

Thank you for your help,

I applied the code above and nothing happen.

www.blackcatdesign.co.th

My desktop is on No.1, my mobile is No.2. I would like to get my mobile as No.3.

/* resize home banner */
@media screen and (max-width:767px) {
.homepage #page section:first-child {
    min-height: 20vh !important;
    height: 40vh;
}
}

you save my day .. @tuanphan

thx u very much, 

@tuanphan

/* resize home banner */
@media screen and (max-width:767px) {
.homepage #page section:first-child {
    min-height: 20vh !important;
    height: 40vh;
}
}

If I want to do it for all of my pages, how could I do that? This code is good for homepage only.

remove .homepage

Thank you @tuanphan