We use cookies to make HubSpot's community a better place. Cookies help to provide a more personalized experience and relevant advertising for you, and web analytics for us. To learn more, and to see a full list of cookies we use, check out our Cookie Policy (baked goods not included).
Mar 7, 2021 5:05 PM
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>
Solved! Go to Solution.
Mar 7, 2021 10:43 PM - edited Aug 31, 2021 7:44 PM
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
Mar 7, 2021 10:43 PM - edited Aug 31, 2021 7:44 PM
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