Aisha Salman Aisha Salman - 5 months ago 17
CSS Question

Responsive footer falls too far below defined height

I want my footer to be responsive on small screen but when I shrink my window width, my footer second class (.pull-right ) goes way down the defined height of footer.Please guide me!

HTML:

<footer>
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-4 pull-left">
<h2>Stay in touch</h2>
<p>Got a website? you want me to work on<br>please, feel free to email me.</p>
<br>
<br>
<h4>Email</h4>
<p>aisha_salman3@outlook.com</p>
</div>
<div class="col-xs-6 col-md-4 pull-right">
<h2>Follow me</h2>
<p>Follow me on social media...</p>
<br>
<br>
<a href=""><img width="36" height="36" src="img/twitter.png"></a>
<a href=""><img width="36" height="36" src="img/linkedIn.png"></a>
<a href=""><img width="36" height="36" src="img/insta.png"></a>
<a href=""><img width="36" height="36" src="img/fb.png"></a>
</div>
</div>
<div class="pull-bottom">
<p>copyright &copy 2016 | Aisha Salman</p>
</div>
</div>
</footer>


CSS:

footer {
height: 400px;
width: 100%;
background-color: #181818;
color: white;
}

.pull-left {
float: left!important;
margin: 40px;
}

.pull-left h2 {
color: #8e8e8e;
}

.pull-left p {
font-size: 17px;
color: #6d6d6d;
}

.pull-left h4 {
color: #8e8e8e;
}

.pull-right {
float: right!important;
margin: 40px;
}

.pull-right h2 {
color: #8e8e8e;
}

.pull-right p {
font-size: 16px;
color: #6d6d6d;
}

.pull-bottom {
text-align: center;
color: #6d6d6d;
position: relative;
top: 50px;
}


Screenshot:
enter image description here

Answer

i have add some media query

footer {
    height: 400px;
    width: 100%;
    background-color: #181818;
    color: white;
}

.pull-left {
    float: left!important;
    margin: 40px;
}

.pull-left h2 {
    color: #8e8e8e;
}

.pull-left p {
    font-size: 17px;
    color: #6d6d6d;
}

.pull-left h4 {
    color: #8e8e8e;
}

.pull-right {
    float: right!important;
    margin: 40px;
}

.pull-right h2 {
    color: #8e8e8e;
}

.pull-right p {
    font-size: 16px;
    color: #6d6d6d;
}

.pull-bottom {
    text-align: center;
    color: #6d6d6d;
    position: relative;
    top: 50px;
}
@media(max-width:1020px){
 .pull-left, .pull-right{
   margin: 0px;
 }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<footer>
  <div class="container">
    <div class="row">
      <div class="col-xs-6 col-md-4 pull-left">
        <h2>Stay in touch</h2>
        <p>Got a website? you want me to work on<br>please, feel free to email me.</p>
        <br>
        <br>
        <h4>Email</h4>
        <p>aisha_salman3@outlook.com</p>
      </div>
      <div class="col-xs-6 col-md-4 pull-right">
        <h2>Follow me</h2>
        <p>Follow me on social media...</p>
        <br>
        <br>
        <a href=""><img width="36" height="36" src="img/twitter.png"></a>
        <a href=""><img width="36" height="36" src="img/linkedIn.png"></a>
        <a href=""><img width="36" height="36" src="img/insta.png"></a>
        <a href=""><img width="36" height="36" src="img/fb.png"></a>
      </div>
    </div>
    <div class="pull-bottom">
      <p>copyright &copy 2016 | Aisha Salman</p>
    </div>
  </div>
</footer>