CSS for mobile only banner height

Site URL: http://www.somaculvercity.com/sundays

Hi,

I'm wanting the banner on this page to scale smaller when on a mobile device so it doesn't get cut off. I think I have the nuts and bolts of code, but can't figure out how to put it together:

.Index ([data-collection-id="5e8796abb6e8ff0b5b099b02"  
  ]) @media screen and (max-width: 640px) {max-height: 115px!important;}

Thanks!

Jared

You mean Home Workshops guide banner?

Yeah, that's the banner I'm trying to make smaller on mobile so that it doesn't get cut off. Thanks!

New attempt:

@media screen and (max-width: 640px) {#collection-5e88fdec68e1057e9c153b26 #banner-area-wrapper { height: 100px }
}

Am I anywhere close?

@media screen and (max-width:640px) {
div#home-worship-banner-section .index-section-wrapper {
    height: 50px;
}
}

That worked great! Thank you so much.