White Space Below Footer - Single Column HTML CSS Page


I’m creating single column coming soon page without using flex or grid . And no background image either.

The project is not completed but while I was searching for the ways to make this responsive (having hard times with the form) I noticed that there is white space below footer.

It shows only when I use firefox or chrome in responsive mode - it shows only when I choose devices but not when minimize or maximize the window.

Could anyone please help me to understand the cause of this issue and provide me with solution.



<!DOCTYPE html>

<html lang="en">


        <meta charset="utf-8">

        <title>Humble Coming Soon Page</title>

        <link rel="stylesheet" href="css/main.css" type="text/css">



    <div class="main-container">



            <h1>Brand Name</h1>




            <div class="container">

                <div class="welcome">

                    <h2>Thanks For Coming. <span class="style-text">We Open Soon.</span></h2>


                <div class="newsletter">

                    <form class="signup">

                        <input type="email" placeholder="Type your email address">

                        <button type="submit">GO</button>



                <div class="social">


                        <li><a href="https://www.facebook.com"><img src="./assets/facebook.png" alt="facebook logo"></a></li>

                        <li><a href="https://www.twitter.com"><img src="./assets/twitter.png" alt="twitter logo"></a></li>

                        <li><a href="https://www.google.com"><img src="./assets/google-drive.png" alt="google drive logo"></a></li>

                        <li><a href="https://www.linkedin.com"><img src="./assets/linkedin.png" alt="linkedin logo"></a></li>

                        <li><a href="https://www.pinterest.com"><img src="./assets/pinterest.png" alt="pinterest logo"></a></li>

                        <li><a href="https://www.snapchat.com"><img src="./assets/snapchat.png" alt="snapchat logo"></a></li>

                        <li><a href="https://www.vimeo.com"><img src="./assets/vimeo.png" alt="vimeo logo"></a></li>

                        <li><a href="https://www.youtube.com"><img src="./assets/youtube.png" alt="twitter logo"></a></li>







            <p>&copy; 2020</p>







/**** General ****/

body {

    margin: 0;

    padding: 0;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 15px;

    line-height: 1.5;

    background-color: #f4f4f4;

    box-sizing: border-box;


html, body {

    min-height: 100vh;


.main-container {

    max-width: 1200px;

    margin: 0 auto;

    text-align: center;

    height: 100vh;


.container {

    max-width: 600px;

    margin: 0 auto;

    padding: 1em;

    background-color: rgb(211, 209, 209);


h1, h2, p, ul {

    margin: 0;

    padding: 0;


/**** Header ****/

header {

    background-color: #FF6600;

    color: #FFFFFF;


header h1 {

    min-height: 100px;

    padding: 90px 0;  

    font-size: 3rem;

    font-weight: 900;


/****** Main *****/

/****** welcome *****/

.welcome {

    padding: 70px 0px 20px 0;


.welcome h2 {

    font-size: 2rem;

    font-weight: 500;

    color: #FF6600;


.style-text {

    color: #2b2b2b;

    opacity: 60%;


/****** newsletter ******/

.newsletter {

    padding: 40px 0px;


.signup {

    border: 2px solid #FF6600;

    border-radius: 19px;

    margin: 0 40px;


.signup input[type="email"] {

    border: none;

    background: none;

    width: 250px;

    height: 40px;

    padding: 0 200px 0 0;


/****** Social ******/

.social {

    padding: 40px 0px;


.social li {

    display: inline;


.social img {

    width: 3.5vw;


/****** Footer ******/

footer {

    background-color: #FF6600;

    color: #FFFFFF;

    min-height: 50px;



footer p{

    padding: 14px 0px;

    opacity: 50%;


Greetings @ramaCode,

What I would do:

  1. Remove max-width: 1200px from .main-container.

  2. Add the following to footer:

 position: absolute;
 bottom: 0;
 width: 100%;
  1. Remove background-color from .container and instead apply it to the body:
body {
  background-color: rgb(211, 209, 209);
  overflow-x: hidden;

overflow-x: hidden; is used to hide the horizontal scrollbar.

I made you a working demo here:


Hope this helps :slight_smile:

Greetings @Queryeleison,

Thank you for your time and effort to help me.

  1. I gave max-width: 1200px for .main-container , so that content won’t grow beyond that for the big screens. May I know the reason why you suggested to remove that?

  2. Your solution made the footer to stick at bottom and now we have large empty space between main and footer.

I think I missed to explain what I’m really looking for. I would like to know about two things

  1. General: regarding checking the responsiveness:

While checking responsiveness using inspect (both firefox & chrome), appearance of the web page changes dramatically. Example, I am presented with different layout between when choosing the given device (ie. samsung s9) and when I drag the view port towards right.

Can anyone help me to understand which layout will be presented to users?

  1. coming soon page: regarding this web page

Initially what I want to achieve in this coming soon page was creating simple 5 to 6 row single column coming soon page without using any flex, grid if possible position and float too.( I don’t know whether it is possible - I just want to know)

Since this website have only 5 rows, I want the web page to fill the screen irrespective of the screen size.

Here I given the screenshots to explain what is happening with the code in three stages.

  1. While coding for my device. 2) Checking responsiveness using given device in browser 3) While dragging view port towards right while in responsive mode.

I have given screenshots for both the original code and the altered code after your suggestion.

My code:

My device

Samsung galaxy s9/s9+ in responsive mode

While dragging in responsive mode (Same resolution as samsung galaxy)

Altered code after your suggestion:

My device

Samsung galaxy s9/s9+ in responsive mode

While dragging in responsive mode (Same resolution as samsung galaxy)

What I want to achieve is display the web page similar to my device in every device irrespective of screen size.

Thanks again and looking forward to all the assistance I can get to understand this from FCC community.

Good day!

Hey @ramaCode,

Try using a grid-based display! I made you a working demo here:

It’s behaving perfectly in all types of devices. See if that’s what you’re looking for.

Hey @Queryeleison ,

Thank you for all your efforts.

But, like I mentioned before the reason I made this design was to create a simple coming soon page without using flex, grid and if possible no position and float. I just wanted to challenge myself.

Today I came up with a way to create it exactly I wanted. I coded without using any grid, flex, position or float. Just used media query for smaller devices, It works fine now.

Thanks again.