Vemos que esta bonito (nem tanto assim kkk)
Mas esta normal!
Agora se diminuirmos o tamanho da tela ?
Chegamos em nosso problema!! O resultado não é responsive, eles vão se aglomerar até um ponto! O que em telas muito pequenas fica feio.
vejam a imagem abaixo:
Imagina isso em uma tela menor ?? ;)
Então temos que mudar isso para ficar responsive!!
Mas para isso temos que usar um pouco de PHP. Coisa simples!!
É preciso fazer um override do Item (da sua busca).
E inserir esse código!
<?php $items = $cck->getItems(); ?>
<?php foreach( $items as $item ) {
echo $item->get('nome')->value;
} ?>
Simples não ?
Mas não é só isso!
O código completo
<?php $items = $cck->getItems(); ?>
<?php foreach( $items as $item ) {
echo '<div id="suadiv">'.'<a href="'.$item->getLink('nomedocampo').'">'.'<h3>'.substr($item->get('nomedocampo')->value ,0,15).'</h3>'.'<img src="'.$item->getThumb1('nomedocampo').'">'.'</div>';
} ?>
Observem!!
Que esse código é para o meu resultado de busca, para o seu vc vai ter que editar o código!!
Eu concatenei 2 campos:
Uma imagem : <img src="'.$item->getThumb1('nomedocampo').'">
O titulo do artigo : '<h3>'.substr($item->get('nomedocampo')->value ,0,15).'</h3>' (Observe que eu coloquei outro coódigo PHP, para que o título tenha no máximo 15 caracteres, isso deixa o titulo menor. )
O outro código chama o Link do artigo' <a href="'.$item->getLink('nomedocampo').'">'
Todos concatenados com HTML simples + uma DIV. (Na div temos apenas um código. float:left )
E coloquei uma borda simples border:1px solid #EEEEEE;
E pronto esta responsive!!
Funciona perfeitamente com qualquer resultado de busca, ITEM.
Basicamente é isto!!
Abraços a todos e agradecimentos ao Cristiano Maia.
