Blank space at the bottom when viewed on a phone

I find it is caused by the Elementor Header & Footer Builder, the footer part.

Hi, thanks for the engagement and I further checked it is caused by the toggle menu and I have added more description to make enough space for the footer toogle menu. (An alternative solution is to add the footer policy part manually). You may check this by “Ctrl+Alt+I”, the space is now no longer visible from mobile now.

I used the toggle menu to avoid the default menu color, but the toggle menu had an issue expanding on mobile phones. I had to ensure there was enough space for it to expand. Later, I resolved this issue with code instead.
I’m replying to this post in case another developer encounters the same issue someday. I’m here to discuss more with you for any better solutions.

HTML for the Policy Part:

<div class="links-container">
    <a >Privacy Policy</a>
    <a >Cookie Policy</a>
    <a >Terms and Conditions</a>
    <a >Sitemap</a>
</div>

CSS

.links-container {
    text-align: center; /
}

.links-container a {
    color: white; /
    text-decoration: none; /
    margin: 0 10px; /
}

.links-container a:hover,
.links-container a:active {
    color: #ffff00; /
}

The class links-container is used to style the links differently from the default link style.