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:
/* 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.
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!
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?
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.
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.
/* 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.