Archived topic
Footer Bar problem
10 replies · Started by Gurer on February 5, 2023
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;
}
Web Site:
https://www.yalikavakyolyardim.com/
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! :)