Par défaut, Divi empile les colonnes verticalement sur mobile pour garantir une bonne lisibilité. Dans certains cas, il peut être utile de conserver l’affichage en colonnes.
Contenu avancé #
Cet article utilise du code CSS. Modifier le comportement mobile peut impacter la lisibilité et l’expérience utilisateur.
Objectif #
Empêcher Divi d’empiler les colonnes sur mobile et conserver leur affichage horizontal.
Code CSS à utiliser #
Ajoute le code suivant dans le CSS personnalisé du site :
@media (max-width: 980px) {
.no-stack .et_pb_column {
width: 50% !important;
float: left;
}
}
Comment utiliser ce code #
Ajoute la classe suivante à la ligne Divi concernée :
no-stack
Cette classe permet d’appliquer le comportement uniquement aux sections souhaitées.
Comprendre le fonctionnement #
- Divi empile les colonnes automatiquement sur mobile
- Ce CSS force une largeur de colonne et empêche cet empilement
- L’utilisation d’une classe permet de cibler uniquement certaines lignes
Cas d’utilisation #
- Afficher deux colonnes côte à côte sur mobile
- Créer des mises en page spécifiques (ex: icônes + texte)
- Conserver une structure visuelle compacte
Points d’attention #
- Ce comportement va à l’encontre du fonctionnement responsive par défaut
- Peut rendre le contenu difficile à lire sur petits écrans
- Les colonnes peuvent devenir trop étroites selon le contenu
Astuce utile #
Utilise cette méthode uniquement sur des contenus simples et courts (icônes, chiffres, éléments visuels). Évite les textes longs en colonnes sur mobile.
Compatibilité #
Cette méthode fonctionne avec les structures classiques de lignes et colonnes Divi. Des ajustements peuvent être nécessaires avec des layouts complexes ou personnalisés.
Pour conclure #
Conserver les colonnes sur mobile permet de créer des mises en page spécifiques, mais doit être utilisé avec précaution pour ne pas nuire à l’expérience utilisateur.