css responsive misaligned

Question

Hello, everybody!

I have an image gallery coming from a database that defaults some items when the screen resolution is reduced to 1150px. This is done when the title under the image is too large and performs a line break.

Can someone help me? Thanks in advance!

<div class="row" align="center">
<div class="col-md-12 col-sm-12">

    <?php
    foreach($currentMovies as $movie){

        if($movie['poster_path'] == null) {
            $posterPath = $path . '../wp-content/uploads/2017/08/noPoster.png';
        }else {
            if(substr($movie['poster_path'], 0, 7) == '/webnet') {
                $posterPath = $path .'../movies/uploads' . $movie['poster_path'];
            } else {
                $posterPath = 'https://image.tmdb.org/t/p/w500' . $movie['poster_path'];
            }
        }
        ?>

        <figure class="col-md-3 col-sm-6">
            <a href="<?=$path;?>filme/?id=<?php echo $movie['id']; ?>&filme=<?php echo $movie['title']; ?>">
                <img class="img_poster" src="<?=$posterPath;?>" style="max-height: 270px; max-width:200px;" alt="<?php echo $movie['title']; ?>">
                <h5 class="tlt_movice" style="color:#ca0088; margin-top:-8px;">
                    <?php echo $movie['title']; ?>
                </h5>
            </a>

        </figure>
    <?php 
    } 
    ?>

    <style>
        @media (max-width: 1153px) 
        {
        }
    </style>
</div> <!-- closes div col-md-12 -->

Answer 1

The problem is that your grid is based on float, when one of the brothers has the height higher than the others the grid breaking.

A simple way to fix this is by transforming the container father in a container flex. Desa forma when you arrive breacking point screen MD max-width: 765px you return the display of container father to initial and now the children will line up below each other.

Follow the code referring to the image above:

.pai {
  display:flex; 
  flex-wrap: wrap;
}
@media screen and (max-width: 765px) {
  .pai {
    display:initial; 
  }
}

<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

<div class="row" align="center">
  <div class="col-md-12 col-sm-12 pai">

    <figure class="col-md-3 col-sm-6">
        <a href="#">
            <img class="img_poster" src="https://placecage.com/100/100" style="max-height: 270px; max-width:200px;" >
            <h5 class="tlt_movice" style="color:#ca0088; margin-top:-8px;">
                ?php echo $movie['title']; ?
            </h5>
        </a>
    </figure>
    <figure class="col-md-3 col-sm-6">
        <a href="#">
            <img class="img_poster" src="https://placecage.com/100/100" style="max-height: 270px; max-width:200px;" >
            <h5 class="tlt_movice" style="color:#ca0088; margin-top:-8px;">
                ?php echo $movie['title']; ? Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste, libero!
            </h5>
        </a>
    </figure>
    <figure class="col-md-3 col-sm-6">
        <a href="#">
            <img class="img_poster" src="https://placecage.com/100/100" style="max-height: 270px; max-width:200px;" >
            <h5 class="tlt_movice" style="color:#ca0088; margin-top:-8px;">
                ?php echo $movie['title']; ? 
            </h5>
        </a>
    </figure>
    <figure class="col-md-3 col-sm-6">
        <a href="#">
            <img class="img_poster" src="https://placecage.com/100/100" style="max-height: 270px; max-width:200px;" >
            <h5 class="tlt_movice" style="color:#ca0088; margin-top:-8px;">
                ?php echo $movie['title']; ?
            </h5>
        </a>
    </figure>

    <figure class="col-md-3 col-sm-6">
        <a href="#">
            <img class="img_poster" src="https://placecage.com/100/100" style="max-height: 270px; max-width:200px;" >
            <h5 class="tlt_movice" style="color:#ca0088; margin-top:-8px;">
                ?php echo $movie['title']; ?
            </h5>
        </a>
    </figure>
    <figure class="col-md-3 col-sm-6">
        <a href="#">
            <img class="img_poster" src="https://placecage.com/100/100" style="max-height: 270px; max-width:200px;" >
            <h5 class="tlt_movice" style="color:#ca0088; margin-top:-8px;">
                ?php echo $movie['title']; ?
            </h5>
        </a>
    </figure>
    <figure class="col-md-3 col-sm-6">
        <a href="#">
            <img class="img_poster" src="https://placecage.com/100/100" style="max-height: 270px; max-width:200px;" >
            <h5 class="tlt_movice" style="color:#ca0088; margin-top:-8px;">
                ?php echo $movie['title']; ? Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste, libero!
            </h5>
        </a>
    </figure>
    <figure class="col-md-3 col-sm-6">
        <a href="#">
            <img class="img_poster" src="https://placecage.com/100/100" style="max-height: 270px; max-width:200px;" >
            <h5 class="tlt_movice" style="color:#ca0088; margin-top:-8px;">
                ?php echo $movie['title']; ?
            </h5>
        </a>
    </figure>
  </div>
</div>