Daniel Daniel - 2 months ago 13
CSS Question

bootstrap columns divs do not have same size, can't make them look how I want

I am trying to make 2 rows of columns and each row have some divs.For the first 2 divs, the content is just the way I like it to but in the others..I can't seem to find my mistake..some wrong padding or something.I want the content to look like in the image for small screens and medium.When I try to zoom in/out, some divs won't have same size or scaling.I just can't figure it out.Here is a bootply link: www.bootply.com/7SYM2HRGVg image

Answer

I achieved your desired result. Try changing your whole css in the bootply with this (I mostly took out some of your unnecessary declarations, you want bootstrap to do its work):

main .row {
}
main .row div {
}
main .row div h2 {
    font-family: "Open Sans";
    margin-bottom: 10%;
}
main .row div p {
    width: 100%;
    padding-right: 10px;
    color: #959595;
    font-family: "Open Sans";
    font-size: 13px;
    line-height: 1.7em;
}
main .row #second_text {
    margin-top: 12%;
}
main #row2,
main #row3 {
}
main #row2 div,
main #row3 div {
    background-color: #f5989d;
}
main #row2 div:hover,
main #row3 div:hover {
    cursor: pointer;
    background-color: #82ca9c;
}
main #row2 div h3,
main #row3 div h3 {
    padding-bottom: 2%;
    color: #fff;
    font-family: "Open Sans";
}
main #row2 div p,
main #row3 div p {
    line-height: 1.8em;
    font-family: "Open Sans";
    color: #fff;
}
main #row2 div p:last-of-type,
main #row3 div p:last-of-type {
    width: 160px;
    font-weight: bold;
    margin-bottom: 0;
}
main #row2 div p:last-of-type i,
main #row3 div p:last-of-type i {
    vertical-align: middle;
    margin-left: 10px;
    font-size: 18px;
}
main #row2 div #icon2,
main #row3 div #icon2 {
    position: relative;
    color: #fff;
    font-size: 18px;
}
main #row2 #box2,
main #row3 #box2 {
    background-color: #615f7d;
}
main #row2 #box2:hover,
main #row3 #box2:hover {
    cursor: pointer;
    background-color: #192431;
}
main #row2 #box3,
main #row3 #box3 {
    background: url("file:///C:/Users/Dante/Desktop/OSF/Site 3/root/images/Clients.png") no-repeat #fff;
    background-size: cover;
    background: black;
}
main #row2 #box3:hover,
main #row3 #box3:hover {
    background: url("file:///C:/Users/Dante/Desktop/OSF/Site 3/root/images/Clients2.png") no-repeat;
    background-size: cover;
}
main #row2 #box3 p:last-of-type,
main #row3 #box3 p:last-of-type {
    margin-top: 16%;
    margin-bottom: 0;
}
main #row3 {
    margin-top: 0;
}
main #row3 div {
    background: url("file:///C:/Users/Dante/Desktop/OSF/Site 3/root/images/SignUp.png") no-repeat #fff;
    background-size: cover;
    background: aquamarine;
}
main #row3 div:hover {
    background: url("file:///C:/Users/Dante/Desktop/OSF/Site 3/root/images/SignUp2.png") no-repeat;
    background-size: cover;
}
h3 {
margin-top: 0;
padding-top: 10px;
}
main #row3 div p {
    width: 65%;
}
main #row3 div p:last-of-type {
}
main #row3 div #icon3 {
    position: relative;
    color: #fff;
    font-size: 18px;
}
main #row3 #box4 {
    background: none #82ca9c;
}
main #row3 #box4:hover {
    cursor: pointer;
    background-color: #f5989d;
}
main #row3 #box4 h3 {
    color: #fff;
    font-family: "Open Sans";
}
main #row3 #box4 p {
    width: 100%;
    line-height: 1.8em;
    font-family: "Open Sans";
    color: #fff;
}
main #row3 #box4 p:last-of-type {
    width: 160px;
    font-weight: bold;
}
main #row3 #box4 p:last-of-type i {
    vertical-align: middle;
    margin-left: 10px;
    font-size: 18px;
}

Then add javascript file reference so the divs will always have the same height:

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.0/jquery.matchHeight-min.js"></script>

<script type="text/javascript">
$(function() {
    $('.col-sm-4, .col-sm-8').matchHeight();
});
</script>