Blank space at the bottom when viewed on a phone

Hey @shalice1218 ,

I checked your site on a mobile device and it seems to be issue with the both toggle menu under footer. So if you can remove toggle then it will fix. because after click need to show all submenu (current active theme setup 100vh height for each page on you site ) .

However, if you’re still seeing a blank space at the bottom of the page, I recommend trying the following troubleshooting steps:

  1. Switch to a Default Theme: Temporarily switch your site to a default WordPress theme (like Twenty Twenty-One) to see if the issue persists. This can help determine if the problem is theme-related.
  2. Deactivate Plugins: Sometimes plugins can cause layout issues. Try deactivating all your plugins and then check the site. If the blank space disappears, reactivate the plugins one by one to identify the culprit.
  3. Check Custom CSS/JavaScript: If you have any custom CSS or JavaScript added, there might be something there affecting the layout. You can temporarily remove these customizations to see if it resolves the issue.
  4. Update Everything: Ensure that your WordPress core, theme, and plugins are all up to date. Sometimes updates can fix bugs and improve compatibility.
  5. Browser Cache: Clear your mobile browser cache to make sure you’re seeing the most recent version of your site.
  • This reply was modified 1 hour, 21 minutes ago by Sumit Singh.

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 href="https://wdsealant.com/privacy-policy/">Privacy Policy</a>
    <a href="https://wdsealant.com/cookie-policy/">Cookie Policy</a>
    <a href="https://wdsealant.com/terms-and-conditions/">Terms and Conditions</a>
    <a href="https://wdsealant.com/sitemap/">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.

 

This site will teach you how to build a WordPress website for beginners. We will cover everything from installing WordPress to adding pages, posts, and images to your site. You will learn how to customize your site with themes and plugins, as well as how to market your site online.

Buy WordPress Transfer