Mobile Slider Crops Images rather than Resizes Responsively

Site URL: https://www.hawkcustomhomes.com

Good evening - 

I have been going through this thread and trying the various successful code snippets, but I must be doing something wrong. Maybe an incorrect section ID. Can you please take a look and send me the correct code to fix the mobile display of the home slider images so it resizes rather than crops the images?

THANK YOU SO MUCH!!!

Megan

Update: I was able to get the slider to update 

@media screen and (max-width:767px) {

.homepage .gallery-fullscreen-slideshow[data-width="full"] {

    height: 40vh !important;

}

}

But now there is a weird padding at the top - can someone please show me how to remove the padding at the top and on the right and left side if possible. 

Add to Design > Custom CSS > Then save & reload the site

/* resize mobile slideshow */
@media screen and (max-width:767px) {
.gallery-fullscreen-slideshow {
    height: 35vh !important;
}
}

Thank you - I must have done something wrong - because I still see the padding above the slider - I would like to reduce that so the slider lays closer to the top under the navigation/mobile home bar.

20 hours ago, Inspyre03 said:

Thank you - I must have done something wrong - because I still see the padding above the slider - I would like to reduce that so the slider lays closer to the top under the navigation/mobile home bar.

Can you keep the code? We can check easier.

Thank you - I realized I added the CSS code to the backup site: 

https://hawk-custom-backup.squarespace.com

password to view the site is: Hawk2021

Please take a look how the CSS works  I tried both  lines of code and the last one stacked my headline, so I have kept it to:  

@media screen and (max-width:767px) {

.homepage .gallery-fullscreen-slideshow[data-width="full"] {

    height: 40vh !important;

}

}