Je rencontre un soucis avec la version responsive de mon site qui est quasi terminé !
Cela concerne le positionnement des textes, lorsque que je touche à la version tablette, la version desktop bouge aussi…
Il s’agit de mes textes bleu et rose de la page d’accueil, ils débordent en version tablet et en version mobile le texte ne revient pas correctement à la ligne…
Une gentille âme pourrait elle me débloquer ? J’ai mis le lien en partage.
Une des petites règles que j’ai appris récemment sur la typography responsive:
Il est mieux de choisir une taille de texte de 100% pour le body et ensuite de choisir une valeure en “em”.
En utilisant cette technique, tout est sensé mieux se mettre à l’échelle sur les périphériques plus petits.
Sur tablet, paragraph2 a une position relative a 38% vers la droite, voila la raison pour laquelle cela déborde.
Sur tablette toujours, le combo texte - image en dessous du boutton en savoir plus pourrait etre mieux contenu en utilisant grid, columns, divs avec flexbox. etc…
Sur mobile (vert.), le texblock est a 65%, il n’a pas assez de place pour respirer. mieux vaudrai le mettre à 100%
Voila, c’est tout ce que je relève.
Dans certains cas, ce qui est fait sur desktop peut affecter le design sur tablette et telephone.
Mais généralement, je commence par le desktop, puis tablette a besoin de redimesionnement horizontal. Ensuite je m’occupe des autres breakpoints généralement en stackant (disposition verticale) les éléments qui ne peuvent pas rester dans une disposition horizontal. Et généralement, aucun problème. Tout est logique dans Webflow. On peut completer le design d’une belle landing page en quelques heures, autres breakpoints compris.
Essayez Display:Block pour les textes avec une largeur du bloc en vw pour un comportement plus responsive.
Aussi, pour les “em” il faut mettre la font du body en taille 100% selon le tuto vidéo.
Il y a quelques combos d’éléments horizontal qui pourraient etre mieux contenus dans des divs avec flexbox, ou carrément grid qui est tout nouveau est simple d’utilisation pour les arramgements symétriques.
Malheuresement, il n’y a pas vraiment de recaptcha responsive.
Cependant il est possible d’utiliser un custom attribute data-size = compact.
Dans la section-profil, les textes se chevauchent sur le breakpoint tablette.
Vous pouvez mettre les text-blocks en position auto. Ou sinon contenir le duo texte et photo dans une div avec flexbox.
