Lawrence William Trigg Lawrence William Trigg - 4 months ago 12
HTML Question

Website Issue Black Area Appears

I hope i am allowed to post problems like this on stack overflow
This is my first portfolio attempt! I am attempting to create a portfolio for work, its been a really good learning curb so far and want to continue web design as a carrier even though i have a hell of a lot more to learn!
So my issue is... i have a black area which appears above the footer and im not sure how to solve it?
Can anybody help?
Sorry for the amount of code.
Not sure how to apply the icon font into the snippets so they will look Chinese, sorry :)
The snippet is the 3 column code i tried to add to my website which is causing the problem
The codepen is the portfolio



/*--------------------
Content Start
--------------------*/
#content-container {
position: relative;
overflow: hidden;
width: 900px;
height: 300px;
background: #D5D5D5;
margin: auto;
top: 210px; left: 0; bottom: 0; right: 0;


}

.container > div {
border: 5px solid #fff;
box-sizing: border-box;
padding: 1em;
}

.main{
background: #F29C9C;
}
.c2 {
background: #F3E59A;
}
.c3 {
background: #9FE0F6;
}

@media screen and (min-width: 768px) {

.main {
width: 50%;
float: left;
margin-left: 25%;
}
.c2 {
width: 25%;
float: left;
margin-left: -75%;
}
.c3 {
width: 25%;
float: right;
}
}
/*--------------------
Content End
--------------------*/

<div class="pattern">
<div class="container">
<div class="main">
<h2>Main Content (1st)</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dictum odio eget mauris vestibulum feugiat. Praesent ante sapien, luctus pulvinar ultricies quis, aliquet in mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dictum odio eget mauris vestibulum feugiat. Praesent ante sapien, luctus pulvinar ultricies quis, aliquet in mi.</p>
</div>
<div class="c2">
<h3>Column (2nd)</h3>
<p>Sed sit amet molestie diam. Etiam adipiscing dictum eros, vitae feugiat augue convallis sit amet. Nunc quis massa non dolor dictum condimentum.</p>
</div>
<div class="c3">
<h3>Column (3rd)</h3>
<p>Sed sit amet molestie diam. Etiam adipiscing dictum eros, vitae feugiat augue convallis sit amet. Nunc quis massa non dolor dictum condimentum.</p>
</div>
</div>
</div>





https://codepen.io/trigg/pen/OXxmrk

The black area appears when the browsers width is shrank.

Answer

The problem is your footer's top: 210px; and your body's margin : 0 0 150px;

So to fix it, insert a resonsive css code:

@media screen and (max-width: 900px) {
    body{
        margin: 0;
    }
    #footer {
        top: 0px;
    }
}

Now for screens smaller than 900px the old css values will be removed.