[Support request] Footer Bar problem

[Gurer]

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;
}

[Gurer]

Web Site:
https://www.yalikavakyolyardim.com/

[David]

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.

[Gurer]

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

[Ying]

Can you try this CSS?

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

[Gurer]

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

[Fernando]

Hi Gurer,

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

[Gurer]

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

[Fernando]

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;
    }
}

[Gurer]

Problem solved with this css, many thanks 🙂

[Fernando]

You’re welcome, Gurer! 🙂

[Author]

Posts