Régler les dimensions et leurs limites
Une carte trop étroite, une image qui dépasse ou un bloc trop haut viennent souvent d’un réglage de taille. Commencez par décider ce qui doit donner sa taille à l’élément : son contenu, son parent ou l’écran.
1. Sélectionner le bon cadre
- Passez en Expert pour accéder aux réglages visuels détaillés.
- Cliquez sur l’élément dans l’aperçu. Dans Calques, vérifiez que vous avez choisi le cadre à redimensionner, et pas seulement son titre.
- Dans Taille, ajoutez Largeur ou Hauteur si le réglage n’est pas encore présent.
L’Expert permet ici de travailler sans écrire de code. La largeur d’une carte ne change pas directement la largeur de ses voisines.
2. Choisir ce qui détermine la taille
Lecture impossible. Réessayez avec les commandes vidéo.
Ouvrez le sélecteur de largeur. Les choix répondent à trois besoins différents.
| Choix | Résultat | Exemple |
|---|---|---|
| Auto | Le navigateur calcule la taille selon la disposition | Une carte dans une grille |
| Fit | Le cadre cherche à s’adapter à son contenu | Un petit badge |
| Full | Le cadre occupe la largeur disponible de son parent | Un bouton dans une carte |
| 50 % | Le cadre occupe la moitié de son parent | Un élément dans une zone large |
| Une valeur liée à l’écran | La taille suit la fenêtre, et non le parent | Une zone d’accueil |
Choisissez 50 %, observez le résultat, puis comparez avec Full. Une largeur de 100 % se mesure par rapport au parent : elle ne signifie pas forcément toute la page.
Pour la hauteur, Auto laisse le contenu déterminer la place nécessaire. Une hauteur liée à l’écran, comme 25vh, représente un quart de la hauteur de la fenêtre. Ce choix ne garantit pas que tout le texte tiendra à l’intérieur.
3. Utiliser une valeur fixe avec discernement
Le sélecteur propose aussi un réglage de taille fixe et un curseur. Une valeur en px correspond à une taille précise ; une valeur en rem suit la taille de texte de référence. Choisissez l’unité avant d’affiner la valeur.
Une taille fixe peut convenir à un petit élément visuel. Pour un cadre qui contient des paragraphes, préférez une hauteur automatique ou une hauteur minimale : le contenu doit pouvoir grandir quand une traduction prend davantage de place.
4. Ajouter un minimum ou un maximum
Dans Taille, vous pouvez ajouter une largeur ou une hauteur minimale et maximale.
- Un minimum empêche l’élément de devenir plus petit que la limite choisie.
- Un maximum empêche l’élément de dépasser la limite choisie.
- Une largeur maximale limite la largeur d’un contenu tout en lui permettant de se réduire.
Ces limites s’ajoutent au réglage principal. Si une largeur de 50 % semble ne rien faire, vérifiez qu’un minimum ne l’empêche pas de réduire le cadre. Si le texte déborde, vérifiez aussi les limites de hauteur.
5. Retirer une valeur et contrôler le mobile
Retirez uniquement le réglage devenu inutile avec sa commande de suppression. Une valeur retirée peut laisser réapparaître une règle du modèle ou d’un autre écran : elle ne transforme pas nécessairement la taille en Auto.
Comparez ensuite les écrans. Le changement de largeur de l’aperçu ne crée pas une règle mobile. Si une exception est nécessaire, utilisez une règle d’écran.
Contrôle final : le texte reste lisible, les boutons restent accessibles et aucun minimum de largeur ne dépasse le petit écran.