Problems with responsive design - item placement

Navigation
0

Well, I'm developing a project, and I ended up with a bug, I just need to fix it, tried it in different ways, but I could not fix it.

IMG 1:

IMG2: Theimageoneshowstheelementsallmessedupbythescreen,however,thisoccursinveryfewresolutions,someare'1206','910'wide,Iwouldliketoknowhowtofixthis,andwhatcaused

CSS:

.container#paginacao{margin-bottom:50px;}.container#paginacao.video-figure{display:block;margin:auto;margin-bottom:30px;}.container#paginacao.video-figureimg{width:100%;float:left;margin-bottom:10px;}.container#paginacao.video-figurefigcaptionh4{font-size:1.2em;margin-bottom:10px;font-weight:800;font-family:'OpenSans',sans-serif;}.container#paginacao.video-figurefigcaptionpspan{text-transform:uppercase;}.container#paginacao.video-figurefigcaptionpi{margin-right:5px;}#paginacao{float:left;width:100%;}@media(max-width:629px){.container#paginacaofigure{width:100%;max-width:460px;}}@media(min-width:630px){.container#paginacao.video-figure{float:left;display:inline-block;width:47.382716049382715%;}.container#paginacao.video-figure:nth-child(2n){float:right;}}@media(min-width:830px){.container#paginacao.video-figure:nth-child(2n){float:left;}.container#paginacao.video-figure{margin-right:2.7538726333907055%;width:31.497418244406195%;}.container#paginacao.video-figure:nth-child(3n){margin-right:0;}}@media(min-width:1024px){.container#paginacao.video-figure{width:23.325892857142858%;margin-right:2.232142857142857%;}.container#paginacao.video-figure:nth-child(3n){margin-right:2.232142857142857%;}.container#paginacao.video-figure:nth-child(4n){margin-right:0%;}}

HTML:

<divclass="container">
    <!-- Miniaturas dos Vídeos -->
    <div id="paginacao">
        <figure class="video-figure">
            <img src="img/hqdefault.jpg">
            <figcaption>
                <h4>CAIXA DE EMAIL CHEIA</h4>
                <p><span>Palavra - </span><i class="fa fa-calendar" aria-hidden="true"></i> 10 de Maio de 2015</p>
            </figcaption>
        </figure>
        ...
    </div>
</div>

* HTML BASE, the image field repeats 20 times.

    
asked by anonymous 20.10.2016 / 18:50

2 answers

2

Hello, how are you?

In my projects I use FLEX a lot

I'll put what it would look like for yours basically!

You should always use FLEX in the container that is grouping the items you want to align!

It would look like this: 

#paginacao{
   display: flex;
   align-items: center;
   flex-flow: row wrap;
   justify-content: space-around;
}

Example in jsfiddle: link

    
20.10.2016 / 19:00
1

Simple ... you can solve this problem by simply setting min-height as a rule of your .video-figure class.

If you pay attention to the first block in IMG1, you will notice that the 10 de Maio de 2015 information has broken line, automatically increasing the height of your box, so the 5th box has entered below the 2nd and not below the 1st

Bootstrap solution
This problem can be solved with a simple min-height , or you can prevent this from happening with Bootstrap , and even guaranteeing more quality in your code, each line of your grid could be easily built into Bootstrap, like this: 

<div class="row">
    <div class="col-md-3 col-sm-4 col-xs-6"></div>
    <div class="col-md-3 col-sm-4 col-xs-6"></div>
    <div class="col-md-3 col-sm-4 col-xs-6"></div>
    <div class="col-md-3 col-sm-4 col-xs-6"></div>
</div>
    
20.10.2016 / 19:00
Doubt in a C program !!! List simply chained! How do you transform a javascript function into an angular "function"?