SOLVED: How to remove bottom white banner below footer

How To
1

Picture1
Picture12991Ă—1479 345 KB

How do I remove the bottom white masthead below the footer? Indicated with a red circle above.

2

Check your footer with dev tool. See what causes the space.

3

Picture2
Picture21920Ă—700 116 KB

Hi there, when I checked there is no element assigned. The last element is shown in the image

4

The padding and margin are also at 0 for that final footer element

5

You may share the URL(if it’s not a local host) here, so others and I will take a look at it. :wink:

6

Sure thing: https://www.studiokallie.co.za/ :slight_smile:

1 Like
7

Spot your issue.

image
image1920Ă—1080 226 KB

The extra space is caused by the dropdown menu from the portfolio. I don’t think you will need the dropdown menu at the footer.

Set overflow:hidden to your footer or remove the dropdown from the portfolio.
I added the overflow:hidden at my browser here, now the space is gone here.

image
image1920Ă—1080 161 KB

After you set overflow:hidden to the footer, the dropdown will not be fully visible. So, remove the dropdown instead.

1 Like
8

You can create another menu just for the footer. Don’t include any submenu for this footer menu.

9

Thank you so so much!! :slight_smile:

1 Like
10

You’re welcome. Glad it helped.

Update the title of this thread to “Solved” so others know. :wink:

1 Like
11

What da!?

12

I had the same problem, and I solved it by adding the following code in Bricks > Settings > Custom Code > Custom CSS:

html, body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.main-content {
    flex: 1;
}

Quick explain:

  1. html, body { height: 100%; }
    Ensures that the body always fills the full height of the viewport.

  2. body { display: flex; flex-direction: column; min-height: 100vh; }
    Turns the body into a vertical flex container.

  3. .main-content { flex: 1; }
    Makes the main content fill all the excess space and pushes the footer to the bottom.