The mobile version of the page has extra white space at the bottom

I have a responsive design that is working well, but I am experiencing an issue on mobile devices where there is white space at the bottom of the page.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    overflow-x: hidden;
}

I attempted to add

html {
height: 100%;
}

body {
min-height: 100%;
}

but this did not resolve the issue.

I reviewed the CSS code for any elements with excessive height, but found none.

I also added

*{
 border: 1px solid red;
}

to help identify the issue, but I was still unable to fix it.

I tried setting margin and padding to 0 for the p element in the footer, but this did not solve the problem either.

Here is the online link to my website:

my website

This issue only occurs on mobile devices; tablets and PCs do not have this problem.

How can I eliminate this white space at the bottom of the page on mobile devices?

htmlcss

Answer №1

The layout issue on mobile is being caused by your .team-section elements, which are overflowing due to the fixed space created by the display: grid property. This issue may not be immediately apparent on desktop screens. The culprit can be seen in the DOM here:

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

To fix this issue, consider only showing the .active element, as it behaves correctly on both mobile and desktop:

.team-section:not(.active) {
    display: none !important;
}

Removing the default display: grid from the elements will eliminate the need for using !important.

Answer №2

Could you please experiment with including the following code snippet at the beginning of the CSS file? Let me know if it has the desired effect.

html,body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
}

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

How can I ensure that PrimeNG is functioning properly?

I'm encountering some difficulties setting up PrimeNG correctly to utilize its rich text editor. Despite installing all the necessary components, it's still not functioning as expected. https://i.stack.imgur.com/4kdGf.png This is my package.jso ...

htmljsontwitter-bootstrapangulartypescript

Issues with implementing Bootstrap tabs in Vue application

Currently, I am in the process of developing an application using vue, vue-router, and bootstrap. My goal is to integrate tags in bootstrap as shown below: <ul class="nav nav-tabs" role="tablist"> <li class="nav-item"> <a class="nav-l ...

javascripthtmlcsstwitter-bootstrapvue.js

Duplicating a concealed div and transferring it to a new div

I'm encountering an issue while trying to copy one div to another. The div I'm attempting to copy has a hidden parent div. The problem is that the destination div does not appear after copying, even though I changed its style display to block. ...

javascriptjqueryhtmlcsscopy

The process of eliminating body padding in Nuxt.js

I'm considering building a website using Nuxt.js because I've heard it's both cool and user-friendly. While I do have some knowledge of vue.js, I'm stuck on a particular issue: How can I remove the padding from the body? I understand ...

javascripthtmlcssnuxt.js

Is it possible to validate the fields on an HTML page that does not include a form tag using jQuery?

Below is a code snippet from my HTML page. Is it possible to validate the two specified text fields using jQuery without using any form tag in my HTML page? <div id="panel1"> <fieldset id="fieldset1"> <legend>Registration Details:</ ...

jqueryhtmljquery-selectorsjquery-validate

Guide to creating a vertical handler that can be resized

Did you know that you can resize tables in http://www.jsfiddle.net? I'm curious about how to resize just the "Vertical Handler". Could someone share the source code with me? If possible, please provide an example on http://www.jsfiddle.net. ...

javascripthtmlcss

PHP data insertion using filters and validation

I have created a database and implemented a validation system to ensure that fields are not left empty. If the fields are filled and pass through the sanitization function, I then proceed to save the data in the database. <?php // Define variables as ...

phphtml

The Bootstrap div is struggling to maintain its width on smaller screens

My attempt to create 3 inputs with the following code: <div class="col-sm-5 col-md-6"> <form> <div class="form-row"> <div class="col-0.5 search-label"> <label class="control-label">Search :</lab ...

cssbootstrap-4

Issues with DnD functionality in Chrome, images not visible during dragging operation

At first, I encountered an issue with event.dataTransfer.setDragImage not functioning properly in Chrome. This can be seen in the example below: http://www.tutorialspoint.com/cgi-bin/practice.cgi?file=html5-59.htm Upon further investigation, I noticed th ...

htmlgoogle-chromedrag-and-dropwebkitchromium

Avoiding the transfer of values via URL in Node.js

Currently, I'm in the process of developing a login system that involves hashing passwords instead of transmitting them via the URL. The frontend comprises a form through which users input their credentials, which are then compared against the stored ...

htmlnode.jsexpressauthenticationejs

Multer error message: "The file or directory you are looking for does not exist"

I am encountering errors while attempting to upload multiple files through Mongoose using multer. As I am new to multer, any assistance would be greatly appreciated. Thank you. Below is my app.js const storage = multer.diskStorage({ destination: functio ...

htmlnode.jsexpressmongoosemulter

What could the possible reason behind the malfunctioning of my prepared statements for the insert operation?

I recently discovered that using prepared statements is a more effective method than using deprecated ones. Despite my best efforts and online tutorials, I haven't had any luck getting this to work or finding the problem. That's why I'm her ...

phphtmlmysql

Exploring the object tag box model and its properties for width and padding in Firefox version 6

Hey there, I've been puzzled by the fact that my Firefox browser seems to be using a different box model for my video embeds compared to Chrome. Even though the same CSS rules are being applied, if the object tag includes attributes like data="whateve ...

firefoxobjectpaddingcss

What is the purpose of the bold line down the left side of every HTML calendar?

Welcome to a calendar layout designed with flexbox: Check it out here Do you notice the thicker lines below the heading rows and want to remove them? Here is how you can modify the HTML & CSS code: #calendars-container { text-align: center; font-f ...

htmlcssflexboxoutline

Creating HTML in Go using data from a struct

I have an HTML file named email.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Shareholder</title> </head> <body> <h1> {{.PageTitle}} </h1> ...

htmlgogo-templates

Can a nofollow attribute be added to concealed modal content in Bootstrap?

Query: I am dealing with a situation where I have a significant amount of disclaimer text within a modal on my website. This text is initially hidden (display:none) until a user clicks a button to reveal it. I want to prevent search engines from indexing t ...

htmlcssseo

Is there a downside to concealing a checkbox off-screen using position: absolute for a clever workaround?

I recently came across a clever trick known as the checkbox hack, which involves hiding checkboxes on web pages by positioning them off-screen. The example provided on CSS Tricks demonstrates this technique with the following code: position: absolute; top ...

css

Albania's Interactive Mapping Tool

I am interested in creating an interactive map similar to the one found at using jQuery and SVG, however I am not sure where to begin. I have the map saved as a .svg.xml file (available here: albania.xml) but I am unsure of what steps to take next. Can an ...

jqueryxmlhtmlsvg

establishing irregular edges for the div container

Looking to create a class that can transform an element into a specific shape using CSS. Not entirely sure if this is achievable with pure CSS alone, but applying a class to the image element will morph it into the desired shape as shown below. <style ...

htmlcss

Check for the presence of a horizontal scrollbar on the page for both computer and mobile devices

Is there a way to determine if a web page has a horizontal scrollbar using jQuery or pure JavaScript? I need this information to dynamically change the css of another element. I initially tried function isHorizontalScrollbarEnabled() { return $(docum ...

javascriptjqueryhtmlcross-browserscrollbar