Blank space between last container and footer

This topic has 17 replies, 3 voices, and was last updated 3 years, 4 months ago by Ying.

Viewing 15 posts - 1 through 15 (of 18 total)

1 2 →

Author

Posts
November 17, 2022 at 11:50 am #2420287

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!

November 17, 2022 at 11:56 am #2420296

Ying
Staff
Customer Support

Hi there,

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

November 17, 2022 at 3:01 pm #2420493

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!

November 17, 2022 at 3:08 pm #2420502

Ying
Staff
Customer Support

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

November 17, 2022 at 4:26 pm #2420578

Roberto

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

November 17, 2022 at 5:26 pm #2420631
Ying
Staff
Customer Support
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.
November 18, 2022 at 4:21 am #2421221

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.

November 18, 2022 at 11:34 am #2422019

Ying
Staff
Customer Support

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

November 18, 2022 at 4:35 pm #2422271

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…

November 19, 2022 at 12:46 pm #2423317

Ying
Staff
Customer Support

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?

November 20, 2022 at 3:37 am #2423787

Roberto

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

November 20, 2022 at 1:45 pm #2424519

Ying
Staff
Customer Support

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

November 20, 2022 at 4:44 pm #2424625

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!

November 20, 2022 at 6:22 pm #2424679

Fernando
Customer Support

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?

November 22, 2022 at 3:19 pm #2428020

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