Le responsive est basé sur la largeur de l'iframe dans laquelle apparaît le composant. Celle-ci s'adapte en fonction de la largeur de l'écran mais elle n'est pas nécessairement égale à la largeur de l'écran, elle peut-être plus petite.

Voici le détail des tailles d'écran, selon les options proposées dans le Dashboard.

Options de votre composant

Dans les options d'édition de chacun de vos composants, vous avez la main sur la gestion du responsive.

Les options vous permettent de maîtriser précisément le comportement de chaque composant pour chaque taille d'écran.

• Affiché/Caché : l'élément sera affiché ou caché, selon la taille d'écran
• Flexible : la largeur de l'élément s'adaptera à l'espace disponible
• Adapté au contenu : la largeur de l'élément s'adaptera à son contenu
• x colonnes : la largeur de l'élément sera fixe, selon un nombre de colonnes défini

Vue desktop

Vue mobile

Paramétrage

On peut choisir de masquer un composant selon la taille d'écran.

Paramétrage CSS

Si vous souhaitez une gestion encore plus fine du responsive, vous pouvez passer par le bloc CSS et définir l'affichage selon des tailles souhaitées via les media queries.

Modifier les propriétés de l'élément > CSS personnalisé > Appliquez votre style selon le CSS suivant :

@media screen and (max-width: 768px) {
/* votre CSS petits écrans */
} 

@media screen and (max-width: 539px) {
/* votre CSS très petits écrans */
} 

Quelques astuces CSS

@media screen and (max-width: 767px) {

  h1 {
   font-size: 28px; /* Titre réduit */
 }

 .section {
   padding: 40px 20px; /* Padding réduit */
 }

 img {
   width: 100%; /* Image full size *
   height: auto;
 }

 .junipero.button.primary {
   max-width: 200px; /* Adapter la taille max des boutons */
 }

 .element {
   width: 80%; /* Largeur du contenu changé sur mobile */
 }

.desktop-only {
 display: none; /* Cacher certains blocs sur une device */
 }
}

Mis à jour le : 31/03/2026