css white space on the bottom of the page only on mobile version

I have a responsive design that work well but i have a problem only on mobile devices that i have a white space in 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 tried to put

html {
height: 100%;
}

body {
min-height: 100%;
}

but it didn't work

i check the css code if i have a big hight in an element but i don't have

i used the

*{
 border: 1px solid red;
}

but also i didn't know how to fix it

i tried margin and padding 0 for the p in the footer but also this doesn't fix the problem

online link for the website

my website

This problem appear only on the mobile device on the tablet and pcs i don't have this problem

How can i remove this white space in the bottom of the page on mobile devices?

Solution 1:

Your .team-section elements are causing the overflowing layout on mobile, on desktop this isn't directly visible. They are taking some fixed space due to the display: grid, as you can see here in the DOM:

When you show only the .active element, it works as expected on both mobile and desktop.

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

The !important is not required if you remove the default display: grid from the elements.