[Resolved] How to change the depth of top container in Broadcast template

Home Forums Support [Resolved] How to change the depth of top container in Broadcast template

Home Forums Support How to change the depth of top container in Broadcast template

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #1865928
    Helena

    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!

    #1866072
    David
    Staff
    Customer Support

    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;
        }
    }
Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.