Shorten Header Images on Mobile

Site URL: https://carrot-bronze-bld8.squarespace.com/bakery

I'm trying to find a way to shorten all header images on mobile. Example of one of the page banners is attached https://carrot-bronze-bld8.squarespace.com/bakery). I also need to shorten the rotating gallery on the homepage (https://carrot-bronze-bld8.squarespace.com)

Thank you!

I was able to resolve the page header issue by altering the h1 margins. Still having trouble with the index rotating gallery. I'm using the code below but have a large black bar  and text is not centered vertically. 

/* resize home slide */
@media screen and (max-width:640px) {
section#rotating-home-gallery img {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
section#rotating-home-gallery {
    height: 300px;
}
}

Try adding to Design > Custom CSS

/* Mobile homepage slide */
@media screen and (max-width:640px) {
section#rotating-home-gallery {
    height: 220px !important;
}
section#rotating-home-gallery .Index-gallery-item-content {
    position: relative;
    top: -50px;
}
}