Within my simple layout, I have 4 columns (col-lg3 col-md/sm-6 and col-xs-12). The display is straightforward, like this:
https://i.sstatic.net/OyhNkm.png
Everything functions perfectly when each column has a width of 3. However, when they adjust to md or sm width, one of them drops down instead of aligning with the others:
https://i.sstatic.net/KizhPm.png
I'm struggling to identify the issue. Any suggestions? Below are the HTML and CSS codes:
<img src="\galeria\repositorio\images\landing\mensalidades-iguais\depoimento-header.png" class="img-responsive"/>
</div>
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
<div class="img-depoimentos-up">
<img src="\galeria\repositorio\images\landing\mensalidades-iguais\beatriz.png"/>
</div>
<img class="quotes" src="\galeria\repositorio\images\landing\mensalidades-iguais\quotes.png"/>
<p class="txt-depoimentos">
Support to learn and peace of mind to pay. Skill was essential in helping me secure a scholarship to Spain!
</p>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
<div class="img-depoimentos-up">
<img src="\galeria\repositorio\images\landing\mensalidades-iguais\gabriel.png"/>
</div>
<img class="quotes" src="\galeria\repositorio\images\landing\mensalidades-iguais\quotes.png"/>
<p class="txt-depoimentos">
Dreaming isn't expensive, especially at Skill! Learning English will make all the difference when trying to land my first internship.
</p>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
<div class="img-depoimentos-down">
<img src="\galeria\repositorio\images\landing\mensalidades-iguais\eduardo.png"/>
</div>
<img class="quotes" src="\galeria\repositorio\images\landing\mensalidades-iguais\quotes.png"/>
<p class="txt-depoimentos">
It all began at Skill. I was a student and now I work at a startup!
</p>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
<div class="img-depoimentos-down">
<img src="\galeria\repositorio\images\landing\mensalidades-iguais\beatriz.png"/>
</div>
<img class="quotes" src="\galeria\repositorio\images\landing\mensalidades-iguais\quotes.png"/>
<p class="txt-depoimentos">
Fluent English and savings in my tuition allowed me to travel. Thanks to Skill, I've experienced new cultures around the world.
</p>
</div>
</div>
</div>
//CSS code for lg-3
.quotes {
padding-bottom: 15px;
}.img-depoimentos-up {
max-width: 100%;
height: auto;
margin-top: -80%;
}
.img-depoimentos-down {
max-width: 100%;
height: auto;
margin-top: -80%;
}
.txt-depoimentos {
color: rgb(71, 107, 172);
font-weight: bold;
font-size: 18px;
}
//Changes made using media query for md-sm-6
img-depoimentos-up {
margin-top: -30%;
}
.img-depoimentos-down {
margin-top: 10%;
}