Chrome - white space at the bottom of the website

Question

I've got a gap at the foot of my page - but only in Chrome. I've tried numerous things, mainly from this question & answer here.

I'm pretty sure it's an overall body issue - I put a border-bottom: 2px solid red; rule on body and it came above the white space.

Here's my style code for body and footer -

body {

    display: flex;
    min-height: 100vh;
    flex-direction: column;
    margin-bottom: 6rem;
    font-family: 'GothamLight', sans-serif !important;
    font-size: 16px !important;
    border-bottom: 2px solid red;

}

footer {

  margin-top: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: auto;
  width: auto;
  background-color: black;
}


footer #email  {
  text-align: center;
  color: white;
 /*  font-weight: bold; */
  padding-top: 50px;
  font-size: small;
}

  p #email {

  padding: 10px;

}

footer #socialmedia {

    text-align: center;
    position: relative;
    top: 75%;

}

Is there anything in there that might be causing it? As previously stated, there's no issue in Firefox and/or Safari - only Chrome. And it happens on all the pages of the site. How do I fix it?

What if you put margin-bottom:0; in body – RDangol Oct 29 '17 at 14:05 — RDangol, Oct 29 '17 at 14:05

score 1 · Answer 1 · answered Oct 29 '17 at 13:49

1

It look like padding problem , check for padding by changing , and check by removing position relative . think it getting padding from any css file .

footer #socialmedia {

text-align: center;
position: relative;// remove it than check 
top: 75%;

}

answered Oct 29 '17 at 13:49

Muhammad Ali

129
7

That's got rid of the gap but now my social media icons won't stay where they were before because 'top' doesn't work. – Mike.Whitehead Oct 29 '17 at 13:55

score 0 · Answer 2 · answered Oct 29 '17 at 15:25

0

I did some more digging on google and found the answer from here.

So now I just include overflow: hidden; in my footer style rules and it removes the white space.

answered Oct 29 '17 at 15:25

Mike.Whitehead

738
13
38

score -1 · Answer 3 · answered Oct 29 '17 at 14:01

-1

Use a cssclass in Social Media Div and than call it in css and this way set your social media icons accordingly .

answered Oct 29 '17 at 14:01

Muhammad Ali

129
7

What do you mean? – Mike.Whitehead Oct 29 '17 at 14:04
use a cssclass instead class or id ... i think u using ID. so replace it with cssclass='socialmedia " and in css call it with like that .socialmedia – Muhammad Ali Oct 29 '17 at 14:05
Sorry that's not working. I need a solution that solves the issue without disturbing the current code. – Mike.Whitehead Oct 29 '17 at 14:18

Chrome - white space at the bottom of the website

3 Answers3