O plugin Jetpack para WordPress vem com um módulo de posts relacionados que automaticamente adiciona, ao final da publicação, uma lista de textos similares. É ideal para direcionar leitores para outros posts relevantes dentro do site.
Você pode configurar os posts relacionados tanto como lista ou em colunas/grade. Ao selecionar a grade, o problema aparece.
Por padrão, o Jetpack força cada post relacionado a ocupar 50% do espaço em dispositivos móveis com telas de até 640px. Como são mostrados três posts, um deles é jogado para uma segunda linha e o resultado fica péssimo:

Há pelo menos duas formas de resolver isso com CSS:
- Forçar cada post a ocupar 1/3 da largura de tela não importando a resolução
- Tornar a área responsiva ao mostrar uma lista em dispositivos móveis e uma coluna em telas maiores
Escolhi a segunda pela versatilidade.
O código
Para testar o código, abra o WP Admin e vá em Aparência > Personalizar > CSS Adicional. Agora, adicione as seguintes linhas:
/* JP Related Posts: create a list on small screens and columns on larger ones -- https://wp.me/paOFn3-1fR */
.entry-content #jp-relatedposts .jp-relatedposts-grid {
width: 100%;
padding: 0;
margin: 0;
}
.entry-content #jp-relatedposts .jp-relatedposts-grid .jp-relatedposts-post {
float: none;
width: 100%;
padding: 1.5em 0;
margin-bottom: 0;
}
.entry-content #jp-relatedposts .jp-relatedposts-post-img {
width: 100%;
padding: 0;
margin-bottom: 1em;
}
@media screen and (min-width: 376px) {
.entry-content #jp-relatedposts .jp-relatedposts-grid {
display: flex;
grid-gap: 1em;
}
}
/* End JP Related Posts */
Em suma, o código faz o seguinte:
- Cria uma lista com os posts por padrão ao remover o
float
e forçar a largura máxima - Arruma os espaçamentos e margens
- Transforma a lista em colunas usando
flex
em telas com largura maior que 375px. Poderia ter usadogrid
, mas vamos simplificar.
Como o CSS do Jetpack carrega no rodapé do site, você vai precisar especificar o seu código. Neste exemplo, eu usei a classe .entry-content
, presente na maioria dos temas. Outra alternativa seria usar o !important
, mas é melhor deixá-lo para último caso.
Como resultado, os posts relacionados ficarão parecidos com a imagem abaixo:

Caso o código acima não funcione no seu site, dê um grito. Talvez seja apenas uma questão de mudar algumas partes do CSS.
Deixe um comentário