[Resolved] Blank space between last container and footer

[Roberto]

Hi, a page is showing me a blank space between the last container (with a google maps embedded code) and the footer. I can’t figure out how to delete this blank space, and let the footer overlap the map.
Here’s the link to the page.
Thank you!

[Ying]

Hi there,

The Container block has an 80px margin-top, that’s where the space coming from:
https://www.screencast.com/t/KAR6w4vh1K

[Roberto]

Oh, thank you! Is there a way to let overlap the map and the footer? Because if I eliminate the 80px margin-top, a white stripe still remain.

Thanks again!

[Ying]

Because if I eliminate the 80px margin-top, a white stripe still remain.

That’s the shape added to the container block of the footer.

If you don’t want that shape, simply remove it 🙂
https://docs.generateblocks.com/article/container-overview/#shapes

[Roberto]

There is no way to make the white part of the shape transparent, right?

[Ying]

There is no way to make the white part of the shape transparent, right?

No, if it’s transparent, then it doesn’t exist.

But you can try removing the shape and add this CSS:

.site-footer {
    clip-path: polygon(38% 0, 100% 60px, 100% 100%, 0 100%, 0 40px);
}

Then add a negative top margin to the container block, eg. -60px.

[Roberto]

Thank you so much.
One last thing: how can you make the same polygon, but changing position (up and horizontally inverted)? I’m trying to do it in the same page, applying it to the gb-inside-container, but I can’t find the right code.
Thanks again.

[Ying]

Here’s a little tool to help you generate the desired clip-path CSS code:
https://bennettfeely.com/clippy/

[Roberto]

Thank you. I’ve tried really hard, but I’m not an expert, and can’t figure out what’s the right code. I ‘ve found the right selector, and tried to replicate the shape inside the tool, starting from your code, but what I came up it’s not working.

Can you, please help me? Just a little bit more…

[Ying]

One last thing: how can you make the same polygon, but changing position (up and horizontally inverted)? I

I’m actually not sure what you mean by up and horizontally inverted, can you explain some more or a mockup?

[Roberto]

You’re right, sorry. Here’s a . The polygon I wish to make is the dark-grey one.
Thanks a lot!

[Ying]

Try this:
clip-path: polygon(70% 8%, 100% 0, 100% 100%, 0 100%, 0 0);

And I got the code like this:
https://www.screencast.com/t/e2DVOTA97j

[Roberto]

Thanks. Unfortunately the code is not the right one, as you can see here:
Maybe I need some other css code or I choose the wrong selector?

Thanks again!

[Fernando]

Hi Giacomo,

The code provided by Ying is for the Footer. It appears to be working viewing your site from my end: https://share.getcloudapp.com/jkuOrYON

To clarify, are you also wanting assistance with the Header?

[Roberto]

Hi Fernando,
yes, the first code provided for the footer by Ying worked perfectly. That’s why I was asking the same code but for the header. I’m really sorry, I was thinking it was clear, but actually I never named the header before.
Can you provide the code for the header, please?
Thanks a lot!

[Author]

Posts