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

Question

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?

@AlexGru yes your solution work if i don't want to use transition thank you a lot you help me to find what cause this problem i solve it by using overflow: hidden; and every thing is fine now and i can use the transition also thank you :) — Mohamad, Jan 22 '22 at 12:57

score 1 · Answer 1 · answered Jan 21 '22 at 15:55

1

Can you try adding the following in the top top of the CSS ? Tell me if it works

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

answered Jan 21 '22 at 15:55

Omar The Dev

123
1
14

I see, I think you can find your solution here. [Mysterious White Space at bottom of Web Page in Mobile-Chrome](https://stackoverflow.com/questions/39070028/mysterious-white-space-at-bottom-of-web-page-in-mobile-chrome) Can you check ? – Omar The Dev Jan 21 '22 at 15:56
thanl you for your answer i tired all of this solution but i doesn't fix my problem – Mohamad Jan 21 '22 at 16:01
Umm can you send me source code on GitHub ? HTML and CSS just to have a quick check ? – Omar The Dev Jan 21 '22 at 16:02
yes https://github.com/mhmd2991/template-03 – Mohamad Jan 21 '22 at 16:04

gru · Accepted Answer · 2022-01-21T16:54:17.990

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.

edited Jan 21 '22 at 16:54

answered Jan 21 '22 at 16:37

gru

2,319
6
24
39

thank you a lot you help me to find the problem i did that overflow: hidden; and i solve the problem because if i use the display: none and display: grid i can't use the transition the overflow: hidden; solve the problem in the mobile version – Mohamad Jan 22 '22 at 12:52
Okay, please accept my answer then. :) – gru Jan 23 '22 at 07:01
Never use !important in your production code. Search why it is bad, but in short, it is a bad practice that goes against the cascading nature of cascading styles. – Dima Jul 10 '23 at 16:20

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

2 Answers2