0

Bom, estou desenvolvendo um projeto, e acabou surgindo um bug, só falta corrigir ele, tentei de diversas formas porém não consegui corrigir

IMG 1: Bugs Responsivo

IMG 2: Bugs Responsivo 2 A imagem um mostra os elementos todos desordenados pela tela, porém, isso ocorre em pouquíssimas resoluções, algumas são '1206', '910' de largura, gostaria de saber qual a melhor forma de corrigir isso, e o que causou

CSS:

.container #paginacao{
    margin-bottom: 50px;
}
.container #paginacao .video-figure{
    display: block;
    margin: auto;
    margin-bottom: 30px;
}
.container #paginacao .video-figure img{
    width: 100%;
    float: left;
    margin-bottom: 10px;
}
.container #paginacao .video-figure figcaption h4{
    font-size: 1.2em;
    margin-bottom: 10px;
    font-weight: 800;
    font-family: 'Open Sans', sans-serif;
}
.container #paginacao .video-figure figcaption p span{
    text-transform: uppercase;
}
.container #paginacao .video-figure figcaption p i{
    margin-right: 5px;
}
#paginacao{
    float: left;
    width: 100%;
}
@media (max-width: 629px){
    .container #paginacao figure{
        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:

<div class="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>

*BASE do HTML, o campo de imagem se repete 20 vezes.

1

2 Respostas 2

2

Opa, tudo bem?

Nos meus projetos eu utilizo bastante o FLEX

Vou colocar como ficaria para o seu basicamente!

Você deve utilizar o FLEX sempre no container que está agrupando os itens que você deseja alinhar!

Ficaria assim:

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

Exemplo no jsfiddle: https://jsfiddle.net/zcejwybh/

4
  • funcionou, só ocorreu outro erro, o primeiro elemento está sendo jogado um pouco pra cima, fora do container - nas mesmas resoluções anteriores, alguns elementos estão se deslocando para cima ou para baixo em pequenos espaços de 10~20px, inspecionei, mas não estão recebendo margens e nem ' top, bottom, right, left' Commented 20/10/2016 às 17:07
  • 1
    Provavelmente tem algum código que está jogando ele pra fora, refaz todo o código media query que você colocou, e vai setando as configurações novamente, interessante do Flex é que ele já da uma "responsivada" automaticamente, poucos casos eu uso media query em elementos com flex Commented 20/10/2016 às 17:11
  • 1
    eu havia esquecido de retirar as margens à direita ;) funcionou 100% Commented 20/10/2016 às 17:31
  • 1
    Muito obrigado pela avaliação! Commented 20/10/2016 às 17:38
1

Simples ... você pode resolver esse seu problema simplesmente colocando um min-height como regra de sua classe .video-figure.

Se você prestar atenção ao primeiro bloco na IMG1, vai notar que a informação 10 de Maio de 2015 quebrou de linha, aumentando automaticamente a altura de sua box, por esse motivo a 5ª caixa encaixou abaixo da 2ª e não abaixo da 1ª.

Solução em Bootstrap
Esse problema pode ser resolvido com um simples min-height, ou vc pode evitar que isso aconteça usando Bootstrap, e até garantindo mais qualidade em seu código, cada linha dessa sua grid poderia ser facilmente construída em Bootstrap, dessa forma:

<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>
2
  • o seu funcionou também, mas eu vou pelo do Matheus pq eu n curto mt o bootstrap, ele tira um pouco da flexibilidade e acaba adicionando coisas um tanto desnecessárias pras minhas necessidades, mas obrigado mesmo assim cara :) Commented 20/10/2016 às 17:32
  • 1
    Flexbox tb é um ótima solução, mas um simple min-height já resolvia hahaha Commented 20/10/2016 às 17:36

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .