Coler234 Coler234 - 2 months ago 5
CSS Question

On resize, div shoots up above the other

This is probably an easy fix, but I can't seem to figure out whats wrong. I deleted everything not necessary so hopefully the code isn't too bad to read.

Basically when you scale the page down, width wise, the footer(contact) overlaps the div above it. On the Code Pen its already overlapping.

HTML:

<div class="library library-row specialties">
<div class="container">
<div class="desc">
<h1>Our Specialties<br/></h3>
<p>
Everything we can do for you
</p>
</div>
<div class="row row-images">
<div class="col-sm-4">
<i class="fa fa-database" aria-hidden="true"></i>
<h4>Databases</h4>
</div>
<div class="col-sm-4">
<i class="fa fa-server" aria-hidden="true"></i>
<h4>Servers</h4>
</div>
<div class="col-sm-4">
<i class="fa fa-cloud" aria-hidden="true"></i>
<h4>Cloud Integration</h4>
</div>
</div>
</div>
</div>

<div class="footer library library-row">
<div class="container">
<div class="accounts">
<i>
<a href="#" class="fa alt fa-facebook"></a>
<a href="#" class="fa alt fa-twitter"></a>
<a href="#" class="fa alt fa-instagram"></a>
<a href="#" class="fa alt fa-github"></a>
<a href="#" class="fa alt fa-envelope"></a>
</i>
</div>
</div>
</div>


CSS: (I'm having trouble pasting it in, sorry but please get it from the Code Pen)

Code Pen: Click Here

Again, sorry if this is a basic fix. I tried, but I'm not sure whats wrong with it.

Answer

There is some CSS being applied to .specialties which is fixing the height of that div. The footer is placed below that div, but the content in the .specialties div is vertically overflowing outside of the div, thus the content rendering underneath and below the footer.

Remove this height: 100vh; CSS and you can see why this is happening. Probably in need of refactor, which I'm happy to help with if you can explain the design intentions.

.specialties {
    height: 100vh;
}
Comments