Change hero image height?

SOLVE
magronin
Member

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>

0 Upvotes
1 Accepted solution

Accepted Solutions
josh_dev
Solution
Contributor

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

 

hubspot-community-signature.png

View solution in original post

1 Reply 1
josh_dev
Solution
Contributor

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

 

hubspot-community-signature.png

View solution in original post