Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Matthew Rigdon
Matthew Rigdon
8,223 Points

Removing white space from bottom of webpage?

I can't figure out why I have so much white space at bottom of my website. I have tried making margins and paddings 0, but that hasn't worked. When I use developer tools the entire HTML content is what you can see, the bottom white space isn't even listed as part of the website. I imagine that is part of the problem, but I am unsure of how to fix that.

Any ideas?

Link: http://s15.postimg.org/t1ya2gx4b/white_space.png

<!DOCTYPE html>

<html>
    <head>
        <title>Money By The Minute</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/main.css">
        <meta name="viewport" content="width=device-width">
    </head>
    <body>
        <header class="main-header">
            <span class="title">Money By The Minute</span>
            <h1 class="main-description">A calculator show you how much you are earning</h1>
            <img class="arrow" src="img/arrow.svg" alt="Down arrow">
        </header>

        <div class="main-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc.</p>
        </div>
        <footer class="footer-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc.</p>
        </footer>
    </body>
</html>

/*  Basic Styling   */

* {
    box-sizing: border-box;
/*  border: 1px solid red;*/
    overflow: hidden;
}

body {
    color: white;
}


/* Class Styling */

.main-header,
.main-content,
.main-footer {
    text-align: center;
}

.main-header {
    padding: 200px 0 50px 0;
    linear-gradient(#ffa949, transparent 90%);
    background: linear-gradient(#000, transparent 25%), /* percent is how far down the trasparent gradient goes */
              linear-gradient(0deg, #000, transparent 25%),
                            url('../img/money.jpg') no-repeat center;
    background-size: cover;

}

.main-content {
    background: black;
}

.footer-content {
    background: black;
}

.main-description {
    font-size: 1.25em;
    text-align: center;
    letter-spacing: .065em;
    padding: 20px 0;
    text-shadow: 1px 1px 1px #000;
}

.title {
    font-size: 3em;
    text-transform: uppercase;
    font-weight: normal;
    display: block;
    text-decoration: underline;
    letter-spacing: .025em;
    text-shadow: 2px 4px 4px #222;
}


/* ID Styling */



/* Arrow */
.arrow {
    width: 50px;
    margin-top: 100px;
}

3 Answers

Ash Scott
Ash Scott
2,544 Points

What white space would you like to remove - there's not really a lot you can do becuase the content isn't enough to fill the page. To take up some of the space, try giving your container a width, so instead of the content being on 2 lines, it will now be on 6 or 7:

.main-content {
    max-width: 1170px; /* Max size it will be */
    width: 100%; /* be 100% of the screen, up to 1170px */
    margin: 0 auto; /* Center the div on the page  */
}

See what that does and post another screenshot for me to look at :) You can also increase the line height on the main on content

Thom Parry
Thom Parry
2,924 Points
Thom Parry
Thom Parry
2,924 Points

I can't see what the actually issue is but I don't think this part is applying to anything, so you could probably remove it. Unless that's what you tried adding the padding and margins to, which would explain why it had no effect perhaps?

.main-footer {
    text-align: center;
}
Matthew Rigdon
Matthew Rigdon
8,223 Points

I added that portion of code for when there is a footer, which there isn't yet! Haha.

Matthew Rigdon
Matthew Rigdon
8,223 Points
Matthew Rigdon
Matthew Rigdon
8,223 Points

Ash Scott

You brought up some good points! I was concerned that the black background didn't go across the entire page (white space at the bottom), but it turns out the problem was that I didn't assign the background color to the body. Rough times haha. I did use your main-content specifications and I like them.

Thanks!

Ash Scott
Ash Scott
2,544 Points

You're welcome, if there's anything else you require, feel free to tag me in a post :)