4
respostas

Responsive imagem e gallery

Como deixar responsive texto , imagem e etc.

             <?php
                $count = 0;
                echo "<div class='col-lg-12 col-md-12 col-sm-12 col-xs-12'><div class='row'>";
                foreach ($produto as $reg) {

                    if($count==3){
                        echo "</div><div class='row'>";
                        $count = 0;
                    }
                    // bebidas ficou setado como padr�o j� que no banco n�o � gravado o filtro
                    echo '
                        <div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter bebidas">
                          <div class="thumbnail">
                          <h4>'. $reg->getNome() .'</h4>
                            <img src="'.$reg->getImagem().'" class="img-responsive">
                              <div class="caption">
                                 <p> '. $reg->getDescricao() .' </p>
                               </div>
                          </div>
                        </div>';
                        $count++;
                }
                echo "</div></div>";
                ?>
4 respostas

Oi Nicolle, tudo bem? Eu não entendi a dúvida realmente, desculpa, mas olhando pelo código, me parece que já adicionou todas as classes responsivas que precisava. Está tendo algum problema específico?

o quadrado nao fica alinhado por exemplo esta responsivo mas na altura nao fica igual

Olá Nicole,

Fiz um CodePen com a sua estrutura e não quebrou nada, pode ser que algum CSS seu esteja impactando nisto, uma dica que eu vi no seu código, você está usando col-xs-6 para quando for dispositivo pequeno, assim em uma tela pequena terá duas colunas, é essa mesma a ideia? Geralmente colocamos pra ter a coluna inteira col-xs-12.

A única coisa que eu coloquei a mais foi o word-break para que o texto da caption não quebre quando o layout diminuir.

.caption {
    word-break: break-all;
}

Nicolle, verifica a solução do Luiz e dá um feedback pra gente aqui?