Flutuante

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:

1. Forçar cada post a ocupar 1/3 da largura de tela não importando a resolução
2. 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 usado grid, 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.