Lors de la création d’un site sous DIVI, pour une visualisation sur ordinateur, un effet visuel avec une alternance de position des images / texte donne un résultat agréable à lire, mais le résultat sur téléphone portable n’est pas aussi agréable …
L’exemple ci-contre à gauche montre un design qui permet de bien scinder les différents paragraphes (illustration 1). Malheureusement, ces alternances donnent un résultat beaucoup moins lisible sur tablette ou sur téléphone, puisque la première image d’illustration, située à droite, se retrouve sous le texte, et la seconde image immédiatement sous cette image, comme ci contre. (illustration 2)
Cette configuration peut cependant être facilement être corrigée par une petite ligne de code à ajouter dans votre thème, et un code CSS dans chaque ligne à inverser.
Code CSS pour inverser des colonnes dans DIVI
Le code ci-dessous doit être ajouté dans le CSS de votre thème DIVI (options du thème, ligne personnaliser le CSS)
@media screen and ( max-width: 980px ) {
.inverse-colonnes {
display: flex;
flex-direction: column-reverse;
}
}Une explication de code s’impose :
- @media screen permet de sélectionner la taille d’écran à partir de laquelle la classe va s’appliquer
- inverse-colonnes est la classe à ajouter dans le module ligne, dans le 3e onglet “avancé” (voir illustration 3), uniquement pour les lignes pour lesquelles vous souhaitez inverser les colonnes
Pour plus d’informations sur les Flex-box, vous pouvez consulter l’article détaillé sur Medium.com
