Site logo

Archived topic

Footer Bar problem

10 replies · Started by Gurer on February 5, 2023

Viewing posts 1–11 of 11

Hi,
I am having trouble with the footer bar, on mobile when we scroll bottom the bar moves up and a white area is seen.
How can I solve this. The CSS code I added to the element is attached.
Best regards,
Gurer

Problem:
https://ibb.co/8YvRyRS

Css:
.sticky-bottom {
position: sticky;
bottom: 0;
z-index: 10;
}

Hi there,

that would be the browser displaying its UI background color.
Some browser support theme-color meta that allows you to set the UI color.

1. Create a new Hook Element in Appearance > Elements

2. Add this meta tag to the hook text area, and change the content hex color to what you want:

<meta name="theme-color" content="#000000" />

3. Set the hook to wp_head

4. Set the Display Rules to Entire Site

5. Publish that element.

Clear the caches on your device, and let me know.

Hi,
I added. No change. Can you please check?

Can you try this CSS?

html {
    background-color: var(--contrast);
}

Hi,
I added problem is same. When I move up and down to page i see the white area. :(
Maybe there is a bug?
Thanks

Hi Gurer,

For reference, what specific mobile device and browser are you using?

Hi Fernando,

Checked with these devices;
Oppo Reno 5 Lite 128 GB
Oppo Reno4 128 GB
Chrome

What do you see on your mobile device?
https://www.yalikavakyolyardim.com/

Kind regards

It's occurring on my phone as well.

What if you make that bar fixed in position instead?

For instance, would this CSS work?:

.gb-container.sticky-bottom {
    position: fixed;
    bottom: 0;
    width: 100%;
}

@media (max-width: 768px) {
    .site-footer {
        padding-bottom: 55.5px;
    }
}

Problem solved with this css, many thanks :)

You're welcome, Gurer! :)

This archived topic is closed to new replies.