Tips for eliminating unwanted white space underneath your webpage while zooming on a mobile device

Currently developing a responsive website, everything is running smoothly except for one issue. When I pinch zoom in on mobile and scroll down, a large white bar appears below the entire page, stretching across the screen width. How can this be fixed? Below is my footer code:

    <footer id="footer">
    <img id="footer-logo" src="imgs/logo.png" alt="White-Tails Icon">
    <h4 style="vertical-align:bottom;">Copyright © West Shore White-Tails 2019</h4>
    <h3 id="check-out-sm">Check out our Social Media!</h3>
    <div class="tooltip">
      <span class="tooltiptext">Visit Facebook</span>
      <a target="_blank" href="https://twitter.com/ClubWscc"><img src="imgs/fbIcon.png" alt="Twitter Icon"></a>
    </div>
    <div class="tooltip">
      <span class="tooltiptext">Visit Twitter</span>
      <a target="_blank" href="https://twitter.com/ClubWscc"><img src="imgs/twitterIcon.png" alt="Twitter Icon"></a>
    </div>
  </footer>

The structure of my entire page is as follows:

<body>
<wrapper>
  <other elements>
</wrapper>

It's important to note that the scrollbar does not appear within this white area...

Edit: Here is the relevant CSS code:

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

body {
  background-image: url("../imgs/bg.png");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  overflow-x: hidden;
}
footer {
  width: 100%;
  height: 20%;
  background-color: #080808;
  text-align: center;
  bottom: 0;
  border-top: 1px solid white;
  position: static;
  padding-bottom: 40px;
}

https://i.sstatic.net/Q5HFB.jpg

Answer №1

The source of the issue may be linked to the CSS. Could you kindly provide the CSS styles used for the body, html, and all footer elements? Another approach would be to utilize the inspect element feature in Chrome browser, simulating a mobile device, to identify the root cause of this spacing.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Which is better: using multiple makeStyles or just one in Material UI?

Uncertain about the best approach in this situation. Is it acceptable to generate styles using makeStyles for each component individually, or would it be better to create one in the base component and simply pass down class names? ...

The Ajax call is failing to trigger the success function

Can anyone assist me? My success function isn't working properly. The beforesend is functioning correctly and I've verified the variable s. It has a true value before the ajax call, so all validations are correct. Please take a look... function ...

Vite HMR causes Vue component to exceed the maximum number of recursive updates

After making changes to a nested component in Vue and saving it, I noticed that the Vite HMR kept reloading the component, resulting in a warning from Vue: Maximum recursive updates exceeded... Check out the online demo on stackblitz. Make a change in Chi ...

Looking to display parent and child elements from a JSON object using search functionality in JavaScript or Angular

I am trying to display both parent and child from a Nested JSON data structure. Below is a sample of the JSON data: [ { "name": "India", "children": [ { "name": "D ...

Instructions for including dependencies from a globally installed npm package into a local package

I've noticed that although I have installed a few npm packages globally, none of them are showing up in any of my package.json files. What is the recommended npm command to automatically add these dependencies to all of my package.json files? ...

A guide on implementing lazy loading for components and templates

I have successfully implemented lazy loading for components and templates individually, but I am struggling to combine the two. Here's an example of how I lazy load a component: // In my main.js file const router = new VueRouter({ routes: [ ...

Problem with maintaining the alternating background color of table rows while using jQuery's animate() function

I have an HTML table that I styled with alternating row background colors. <table class="tb_record"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> < ...

Resolving Ion Auth's Ajax Login Redirect Problem in CodeIgniter

Trying to incorporate the Ion Auth framework into my CodeIgniter application has been a bit challenging. When a user clicks on a link, the request is sent to a Controller method to check if the user is logged in or not. If not, it redirects to the auth&bso ...

The scrolling on the image listing webpage is not as fluid as desired

I'm currently working on building a website for displaying images in Angular, similar to Google Photos. The site includes a custom scrollbar that displays the month and year. I want the image list to scroll when the user moves the scrollbar thumb. Her ...

Problems with Material UI autocomplete causing destruction of Redux-form values

I'm facing an issue with integrating Material UI's autocomplete component into a Redux wizard form. Although I successfully linked the autocomplete feature, I encountered a problem when navigating back to the second page where the autocomplete f ...

The font in my Next.js / Tailwind CSS project starts off bold, but unexpectedly switches back to its original style

I recently integrated the Raleway font into my minimalist Next.js application with Tailwind CSS. I downloaded the font family in .ttf format and converted it to .woff2, but I'm having trouble changing the font weight using custom classes like font-bol ...

Adding a class to a navigation item based on the route path can be achieved by following

I am currently working on a Vue.js project and I have a navigation component with multiple router-links within li elements like the example below <li class="m-menu__item m-menu__item--active" aria-haspopup="true" id="da ...

Allowing an empty string in the option field should be displayed

I have a regular expression for validating URLs, but I am facing an issue where the field is optional. Currently, even if no URL is entered, the validation still occurs. I want the validation to only happen if the user enters a URL, otherwise it should acc ...

Symbol '%' is not supported in Internet Explorer

My experience with IE versions 8 and 9 has been that they do not recognize the &percnt; entity. I have tested this on two different computers. I found information suggesting that it should be supported in IE here: http://code.google.com/p/doctype/wiki ...

Enhancing IntelliJ IDEA's autocomplete functionality with JavaScript libraries

Is there a way to add my custom JavaScript library to IntelliJ IDEA 10.5 or 11 for autocomplete functionality? I want to specify that IDEA should recognize and suggest auto-completions for objects from my library. While it sometimes works automatically, ...

Converting a PHP array to a JavaScript array causes an issue of undefined variable when attempting to access a PHP array that has

I've been searching through other questions without finding the answer, so I'm reaching out for help with my specific issue. My problem is transferring a php array to a javascript array. In my code editor (phpStorm), I'm getting an error st ...

Having trouble with the jQuery load function not functioning properly

I have encountered an issue with this code snippet while running it on XAMPP. The alert function is working fine, but the HTML content fails to load. I have included links to jQuery 3.2.1 for reference. index.html $(document).ready(function(){ $("#b ...

What is the best way to invoke a function within an AngularJS controller?

Currently, I am exploring the most efficient method of calling a function from an AngularJS controller externally. In our setup, data is transmitted from a Python backend to the frontend using JavaScript functions. To feed this data into the Angular contr ...

accordions that are supposed to adapt to different screen sizes are

My custom responsive accordions are not functioning as expected. The requirement is to display headings and content for desktop view, but switch to accordions on smaller devices. I have managed to do this, however, when resizing the window, the functionali ...

What steps should I take to incorporate Google sign-in on my website and gather user information efficiently?

I am looking to add the Google sign-in button to my website. While I am knowledgeable in HTML, PHP and JavaScript are not my strong suits. My goal is to allow users to sign in with their Google account and securely store their information on my database th ...