Trouble Updating Background Header Image Height

[sconner91]

I would like to decrease the size of the background header image - it currently is taking up too much of the screen and requires a scroll to get to see any text. Ideally, I would like to have the image end about right below where the date is on this landing page:  

https://resources.mediaradar.com/mediaradaruniversity 

the css is named:  Custom/page/Marketplace_Templates/oceania_style1.css 

Would anyone be able to assist?

[Ty]

Hi @sconner91,

I took a look at your page and it seems that the height of that container is controlled by the padding around your text within it, and not actually a set height.

If you add a set height to the div, it will resize iot's height, but not keep your text in the same position. However, you can try something like this (you may want to mess with the padding values to get a desired result) in your CSS.

.heroSection{   
 padding: 120px 0 50px;
}

The 120px is affecting the property padding-top

The 50px is affecting the property padding-bottom

You need a higher padding top to clear your content from your menu, since the menu is set to position:absolute.

Try this out and let me know how it works out, hope it helps!

-- Ty

[sconner91]

Thanks Ty! 

I tried adding this in a few different locations and I think I might be adding it to the wrong line. Where should I add that in the CSS or am I replacing padding that is already there?

Thanks!

[Ty]

It looks like it's in your CSS a few times, but it's sort of a global style, so what I would do is scope it down. This will make it so you aren't affecting all of the hero's on your whole site with that class.

Go into your template for that page and give it a specific class name, ie: (university-page) or something like that. then target the element like this:

.university-page .heroSection{
/* your css */ 
}

or, alternatively, target it by the Content-ID that HubSpot generates for it, like this:

.hs-content-id-4713186847 .heroSection{
/* your css */
}

This will scope your styling down to just the hero section on that page. Once you're scoped you shouldn't need an !important tag either.

Let me know how this works,

-- Ty

[sconner91]

Still no luck - I was able to decrease the size of the footer no problem but I can't find where the spacing and padding is on the text in the header. I will keep playing around with it. 

Thanks!

[Ty]

That seems weird, do you mind if I try adding some code into the CSS file you linked to see if I can figure out why it's not applying the CSS? 

-- Ty

[sconner91]

Sure, that would be great!

[Ty · Accepted solution]

Hi @sconner91,

How does that look? I added my line of code on line 769 of this file: https://app.hubspot.com/design-manager/1808942/code/4630821071

/* Shorten the height of your hero on the University page: https://resources.mediaradar.com/mediaradaruniversity *
 * Implemented by Ty from HubSpot in reference to this community post: https://community.hubspot.com/t5/COS-Design-Support/Trouble-Updating-Background-Header-Image-Height/m-p/6549/highlight/false#M665
 * Date of implementation: Feb 6th, 2017 - 12:03PM EST */

.hs-content-id-4713186847 .heroSection{   
 padding: 120px 0 50px;
}

Feel free to adjust the padding numbers accordingly aswell.

-- Ty

[sconner91]

That is perfect, now I know where to make the update moving forward. Thank you so much for your help!!