Actualités WordPress, CSS & Webdesign, OceanWP & Elementor.

Un petit bug visuel bien gênant perdure lorsque vous utilisez Elementor avec OceanWP par exemple (ou un autre thème comme Astra) : l’espace après le dernier paragraphe !

Cet espace « pousse » le dernier paragraphe par rapport au bord inférieur de la colonne ou de l’élément conteneur (widget flip-box, etc). Il est de 20 pixels dans le thème OceanWP et ajouté au règles de base de marges internes des blocs cela créé une marge nettement plus grande en bas des conteneurs.

Petit tour du problème.

La règle CSS du :last-child pour cibler le dernier élément

Il existe une règle CSS qui permet de cibler le dernier élément d’une balise ou classe facilement, dans le cas du paragraphe on cible simplement le dernier comme ceci :

p:last-child { margin-bottom: 0 !important; }

En enlevant la marge définie sur les paragraphes du thème OceanWP on supprime l’espace prévu dans la règle pour laisser l’élément final sans marge inférieure. Ci-dessous le résultat avec le hack CSS en place. L’espace autour du texte est mieux distribué avec la nouvelle règle.

Voilà un petit hack CSS qui va bien pour faciliter le travail dans Elementor. Il faut ajouter la règle à votre thème enfant ou dans les options d’apparence : Personnaliser -> JS/CSS personnalisé et le tour est joué !

Elementor n’est pas toujours fautif

Tous les thèmes n’ont pas les mêmes attributs pour la balise <p>, certains mettent la marge sous le paragraphes, d’autres la distribuent en haut et en bas cela réduit ainsi la marge sous le dernier paragraphe d’autant. Il n’est pas nécessaire d’utiliser cette règle partout. Néanmoins qui peut le plus peut le moins et je vous conseille d’ajouter cette règle si vous ne savez pas comment est géré les marges du paragraphe dans votre thème.
Bonne utilisation !

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Fermer le menu