Adapter la disposition sur mobile

Sur un petit écran, deux boutons côte à côte peuvent manquer de place. Une grille confortable sur ordinateur peut aussi devenir trop serrée. Vous pouvez adapter la disposition selon la largeur, sans dupliquer la page.

Dans ce guide, les commandes sont montrées en mode Expert, dans le panneau de réglages. Vous n’avez aucun code à saisir.

Avant de commencer

Affichez plusieurs rendus côte à côte. Si les règles d’écran sont nouvelles pour vous, commencez par comprendre leur portée et leurs priorités.

Sélectionnez le conteneur, c’est-à-dire le groupe qui contient les éléments à disposer. Pour déplacer deux boutons l’un par rapport à l’autre, sélectionnez leur groupe, plutôt qu’un seul bouton. Un clic dans une zone vide entre les enfants peut sélectionner ce groupe. Si vous sélectionnez toujours une carte ou un bouton, ouvrez Calques et choisissez le groupe qui les contient ; dans notre exemple de cartes, il apparaît comme Grille. Vérifiez les réglages affichés dans Mise en page.

1. Passer d’une rangée à une colonne

Dans notre exemple, les deux boutons appartiennent à un conteneur Flex. Ce type d’affichage permet de les placer en rangée ou en colonne.

Dans Mise en page, retrouvez Direction. Si cette propriété n’apparaît pas encore, cliquez sur le bouton d’ajout du groupe Mise en page et choisissez Direction.

Sur la ligne de base, choisissez l’icône Colonne. Les éléments se placent l’un sous l’autre. À ce stade, ce choix peut se répercuter sur tous les écrans : la valeur de base ne désigne pas seulement le mobile.

Survolez Direction, ouvrez son menu d’ajout de règle et choisissez Tablet ou Tablette, selon la langue de l’interface. Sur la ligne md, choisissez l’icône Rangée.

Vous obtenez alors une colonne en dessous de 768 px et une rangée à partir de 768 px, tant qu’une autre règle ne vient pas remplacer cette direction. Les trois rendus vous permettent de vérifier immédiatement le résultat.

Le passage en colonne conserve l’ordre des éléments. Il ne réécrit pas les boutons, leurs liens ou leur texte.

2. Donner de l’air entre les éléments

Le réglage Écart définit l’espace entre les enfants d’un conteneur Flex ou Grid. Il évite d’ajouter une marge différente sur chaque bouton.

Dans Mise en page, ouvrez le sélecteur de la valeur de base d’Écart et choisissez une valeur proposée. Dans la démonstration, 4 correspond à 16 px.

Pour augmenter cet espace sur les grands écrans, ajoutez une règle Tablette sur Écart. Sur la nouvelle ligne md, choisissez une autre valeur. Dans la vidéo, 6 correspond à 24 px.

L’écart est alors de 16 px sur les petites largeurs et de 24 px à partir de 768 px, en l’absence d’une autre règle prioritaire. La direction et l’écart sont deux réglages indépendants : changer l’espace ne fait pas passer une rangée en colonne.

3. Adapter le nombre de colonnes d’une grille

Sélectionnez cette fois le conteneur de la grille, puis retrouvez le réglage Colonnes dans Mise en page. Regardez les lignes existantes avant d’en ajouter une : la grille peut déjà avoir une valeur de base et une valeur pour la tablette.

Dans notre exemple, les trois cartes de cours forment une seule colonne sur mobile et trois colonnes à partir de la tablette. Ouvrez le sélecteur de la ligne md et choisissez 2.

La grille conserve une colonne sur mobile et passe à deux colonnes à partir de 768 px. La troisième carte se place sur une nouvelle rangée. Rien n’est supprimé : seul le nombre de colonnes change.

Ce réglage compte les colonnes du conteneur. Il ne remplace pas les éventuels réglages de largeur ou d’occupation de colonne présents sur une carte. Si une carte conserve une taille inattendue, vérifiez aussi ses propres propriétés.

4. Contrôler le résultat

Regardez chaque largeur : les boutons restent-ils lisibles et accessibles ? Les cartes ont-elles assez de place pour leur texte ? Une nouvelle rangée crée-t-elle un espace gênant ?

Vérifiez aussi une largeur proche du seuil utilisé. Une page qui fonctionne à 768 px doit rester lisible juste en dessous. Dans le menu Écran, choisissez les cadres utiles pour poursuivre la comparaison.

Enregistrez les modifications, puis testez une version de prévisualisation publiée avant la mise en ligne.

Si une commande manque ou si rien ne change

Direction n’apparaît pas. Vérifiez que vous avez sélectionné le conteneur et que son affichage est Flex. Le réglage du nombre de colonnes concerne plutôt une grille.

Le réglage existe, mais vous ne voyez pas son effet. Vérifiez le badge de la ligne modifiée et les règles suivantes. Une règle applicable à une largeur plus grande peut remplacer votre valeur.

Un seul bouton change de taille. Vous avez peut-être sélectionné le bouton au lieu du groupe. Les réglages du parent organisent les enfants ; ceux du bouton règlent sa propre apparence.

Vous voulez revenir en arrière. Utilisez Annuler pour revenir au réglage précédent, ou retirez seulement la valeur conditionnelle concernée, comme dans le guide des règles d’écran.