[Resolved] Extra space below container in header when using GP Elements

Home Forums Support [Resolved] Extra space below container in header when using GP Elements

Home Forums Support Extra space below container in header when using GP Elements

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #2012947
    Phil

    Hi,

    I’m trying to create a bar that sits above the page header using GP Elements. I set the hook to show on on “Entire Site” for “before_header”.
    The bar shows fine but there is an extra space of about 55px below the bar – see the area marked with the red brackets:
    https://snipboard.io/jw8xYC.jpg

    This is the structure of the blocks – I have a columns block inside a container block:
    https://snipboard.io/JE1kQ2.jpg

    This is the code generated by the blocks:

    <div class="gb-container gb-container-05c95bf4"><div class="gb-inside-container">
    <div class="wp-block-columns header-top-bar">
    <div class="wp-block-column header-top-bar-social"><div class="gb-button-wrapper gb-button-wrapper-1f89cfd8">
    <span class="gb-icon"><svg aria-hidden="true" role="img" height="1em" width="1em" viewBox="0 0 320 512" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"></path></svg></span>
    <span class="gb-icon"><svg aria-hidden="true" role="img" height="1em" width="1em" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z"></path></svg></span>
    <span class="gb-icon"><svg aria-hidden="true" role="img" height="1em" width="1em" viewBox="0 0 576 512" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"></path></svg></span>
    </div></div>
    <div class="wp-block-column header-top-bar-phone">
    <p class="has-base-color has-text-color" style="font-size:28px"><strong>Call us: 0800</strong></p>
    </div>
    </div>
    </div></div>

    Here’s an example of the page that shows the header:
    https://fscl.anyware.co.nz/404

    Are you able to advise where the extra space is coming from?

    Thanks,
    Phil

    #2013048
    David
    Staff
    Customer Support

    Hi there,

    the standard text block will have the default bottom margin on it. Use a GenerateBlocks Headline block instead, you can set the HTML Tag to P and you have full styling controls built in including bottom margin which you can set to 0.

    #2014131
    Phil

    Perfect, thanks David.

    #2014373
    David
    Staff
    Customer Support
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.