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

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

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.

CodePudding user response：

It's from your HTML that contain team-section class but not active.

The element team-section one contain active class. Its css is..

.our-team .team-container .team-section.active {
  opacity: 1;
  visibility: visible;
  height: auto;
}

That's make it non-transparent (opacity: 1), visible (visibility: visible), and have auto height. While all other elements that contain same class team-section is..

.our-team .team-container .team-section {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(236px, 1fr));
  gap: 30px;
  opacity: 0;
  visibility: hidden;
  height: 0;
}

The visibility is not make it completely disappears! Even if you have height: 0 but it still take place.
Add display:none; to each of those doesn't active make bottom blank space gone.

Fix.

This is just easy quick fix. Not good for CSS animation, transition.

.our-team .team-container .team-section {
  display: none;
}

.our-team .team-container .team-section.active {
  display: grid;/* add this to your .active class in css file. */
}