Change hero image height?

[magronin]

I have a website template built by HubSpot's devs when we originally launched and the hero graphic box is too large. We have it set so that it's responsive and on mobile the box gets smaller with custom HTML code on the template but the issue is still desktop (max-height is 750px and it should be changed to 450px).

Anyone know of how to edit the HTML header override code to reduce max-height on desktop from 750px to 450px?

Site: https://go.ubiquity.com/finserv-whitepaper

Current HTML code on template:

<style>

@media only screen and (max-width: 800px) {
.custom-banner-area {
width:100% !important;
height: 250px !important;
}
.custom-banner-wrapper {
height: 250px !important;
padding-top: 40px !important;
}
.body-container-wrapper {
margin-top: -100px !important;
}
}

</style>

[josh_todd · Accepted solution]

The max height on your hero is set to 350px on Desktop. Where are you seeing it's set to 750px?

.custom-banner-wrapper {
    -ms-flex-align: center;
    align-items: center;
    display: -ms-flexbox;
    display: flex;
    height: 100vh;
    margin: 0 0 100px !important;
    max-height: 350px;
    overflow: hidden;
    padding: 0 0 65px 0;
    position: relative;
}

Joshua Todd | CEO of Pixl Labs
www.pixllabs.io