Brian Brian - 3 years ago 86
CSS Question

Newbie - Bootstrap Divs Not Spacing Out Correctly

Hoping someone can help me figure out what I am missing. Right now, the rows are overlapping. I want the two rows to be spaced out appropriately, based off of the size of the images (they are all same size). I have no idea what I am missing to make this respond the way I want it to.

Code

HTML

<div class="row vert-pad gallery-project-container" style="margin-left: 75px; margin-right: 20px;">
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="gallery-project-thumb"><img src="https://via.placeholder.com/840x560"> <img class="gallery-project-thumb-background" src="https://via.placeholder.com/840x560"> <img class="gallery-project-thumb-background" src="https://via.placeholder.com/840x560"></div>
</div>

<div class="col-sm-6 col-md-4 col-lg-3">
<div class="gallery-project-thumb"><img src="https://via.placeholder.com/840x560"> <img class="gallery-project-thumb-background" src="https://via.placeholder.com/840x560"> <img class="gallery-project-thumb-background" src="https://via.placeholder.com/840x560"></div>
</div>

<div class="col-sm-6 col-md-4 col-lg-3">
<div class="gallery-project-thumb"><img src="https://via.placeholder.com/840x560"> <img class="gallery-project-thumb-background" src="https://via.placeholder.com/840x560"> <img class="gallery-project-thumb-background" src="https://via.placeholder.com/840x560"></div>
</div>

<div class="col-sm-6 col-md-4 col-lg-3">
<div class="gallery-project-thumb"><img src="https://via.placeholder.com/840x560"> <img class="gallery-project-thumb-background" src="https://via.placeholder.com/840x560"> <img class="gallery-project-thumb-background" src="https://via.placeholder.com/840x560"></div>
</div>
</div>
<div class="row vert-pad gallery-project-container" style="margin-left: 75px; margin-right: 20px;">
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="gallery-project-thumb"><img src="https://via.placeholder.com/840x560"> <img class="gallery-project-thumb-background" src="https://via.placeholder.com/840x560"> <img class="gallery-project-thumb-background" src="https://via.placeholder.com/840x560"></div>
</div>

<div class="col-sm-6 col-md-4 col-lg-3">
<div class="gallery-project-thumb"><img src="https://via.placeholder.com/840x560"> <img class="gallery-project-thumb-background" src="https://via.placeholder.com/840x560"> <img class="gallery-project-thumb-background" src="https://via.placeholder.com/840x560"></div>
</div>

<div class="col-sm-6 col-md-4 col-lg-3">
<div class="gallery-project-thumb"><img src="https://via.placeholder.com/840x560"> <img class="gallery-project-thumb-background" src="https://via.placeholder.com/840x560"> <img class="gallery-project-thumb-background" src="https://via.placeholder.com/840x560"></div>
</div>

<div class="col-sm-6 col-md-4 col-lg-3">
<div class="gallery-project-thumb"><img src="https://via.placeholder.com/840x560"> <img class="gallery-project-thumb-background" src="https://via.placeholder.com/840x560"> <img class="gallery-project-thumb-background" src="https://via.placeholder.com/840x560"></div>
</div>
</div>


CSS

img {
max-width: 100%;
-webkit-backface-visibility: hidden;
}

.gallery-project-thumb {
position: relative;
}

.vert-pad {
padding-top: 30px;
padding-bottom: 30px;
}

.gallery-project-thumb img:first-child {
border: 8px solid #fff;
-webkit-box-shadow: 0 0 6px 0.5px rgba(0,0,0,.5);
-moz-box-shadow: 0 0 6px .5px rgba(0,0,0,.5);
box-shadow: 0 0 6px 0.5px rgba(0,0,0,.5);
position: absolute;
z-index: 3;
-webkit-backface-visibility: hidden;
display: block;
}

.gallery-project-thumb img:nth-child(2) {
z-index: 2;
margin-bottom: 15px;
border: 8px solid #fff;
-webkit-box-shadow: 0 0 6px 1px rgba(0,0,0,.5);
-moz-box-shadow: 0 0 6px 1px rgba(0,0,0,.5);
box-shadow: 0 0 6px 1px rgba(0,0,0,.5);
position: absolute;
-ms-transform: rotate(-2deg);
-webkit-transform: rotate(-2deg);
transform: rotate(-2deg);
-webkit-backface-visibility: hidden;
}
.gallery-project-thumb img:nth-child(3) {
z-index: 1;
margin-bottom: 15px;
border: 8px solid #fff;
-webkit-box-shadow: 0 0 6px 1px rgba(0,0,0,.5);
-moz-box-shadow: 0 0 6px 1px rgba(0,0,0,.5);
box-shadow: 0 0 6px 1px rgba(0,0,0,.5);
position: absolute;
-ms-transform: rotate(2deg);
-webkit-transform: rotate(2deg);
transform: rotate(2deg);
-webkit-backface-visibility: hidden;
}


Thanks in advance.

Answer Source

Because the images are being absolutely positioned, the browser doesn't know how tall to make those element. If you set a height to the .gallery-project-thumb class as the height of the image you should be set

.gallery-project-thumb{
    height: 300px;
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download