Archived topic
How to change the depth of top container in Broadcast template
1 reply · Started by Helena on July 22, 2021
Hi there,
I'm using the Broadcast template but I'd like to minimise the depth of the color box at the top of the page when it's displaying Posts. I love the overlap effect with the text container but the top container is just a bit too deep (if that makes sense) especially on mobile it pushes most visible content below the fold. I know this is probably something I can change is CSS but I'm not very savvy with that and wondered if anyone could help me out?
Thank you!
Hi there,
the Broadcast site uses the Block Element to create those 'page heroes':
https://docs.generatepress.com/article/block-element-overview/
And doc thats more specific to using them for Page Heroes:
https://docs.generatepress.com/article/block-element-page-hero/
Go to Appearance > Elements and you will see 3 x 'Hero' elements.
You will need to edit each one of them, and then use the GenerateBlocks styling controls to reduce the Top / Bottom padding on the parent Container Block. NOTE the responsive Desktop / Tablet / Mobile views which provide responsive controls.
Please note there is a larger bottom padding on those Container blocks as its required to accommodate the overlapping page content. The overlapping content is set using this CSS found in the Customizer > Additional CSS:
.separate-containers #page .site-main {
margin-top: -80px !important;
}
@media (max-width: 768px) {
body .site.grid-container {
margin-left: 30px;
margin-right: 30px;
}
}