Mobile and desktop header sizing Dawn Theme

Hi I have searched and read many posts on this, but cant find the css or theme files mentioned.

Site - www.orangegrove.co.nz

I would like the mobile banner to resize to fit and the desktop banner to look as is. Can anyone help me with code please?

Also, see image, there is so much space above and below the banner in this box and other boxes, how can we get more control with this?
Thanks
Wendy

Please add below css code in bottom of assets/base.css file

@media screen and (min-width: 750px)
.banner–small:not(.banner–adapt) {
min-height: 30rem;
margin-bottom: 45px;
}

Thank you.

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset >base.css and paste this at the bottom of the file:
@media screen and (min-width:767px){
body .banner--small:not(.banner--adapt) {
min-height: 65rem;
}
body .banner--small:not(.banner--adapt) .banner__media.media img {
object-fit: cover !important;
}
}

THanks but this didnt help