Site logo

Archived topic

Extra space below container in header when using GP Elements

3 replies · Started by Phil on November 21, 2021

Viewing posts 1–4 of 4

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

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.

Perfect, thanks David.

You're welcome

This archived topic is closed to new replies.