---
title: "[CSS] Conserver les colonnes sur mobile dans une section Divi"
description: "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…"
url: "https://academy.drgeek.com/docs/avance/divi-code/css-conserver-les-colonnes-sur-mobile-dans-une-section-divi/"
updated: "2026-03-19"
category: Avancé / Divi (code)
tags:
  - Avancé
---

# [CSS] Conserver les colonnes sur mobile dans une section Divi

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.