Streaming live at 10am (PST)

Problème avec le responsive


#1

Bonjour à tous et aux francophones,

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.

Un grand merci d’avance !

Lisa de Bordeaux.

:hugs:


Here is my site Read-Only: LINK
(how to share your site Read-Only link)


#2

Bonsoir Lisa,

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.

N’hésitez pas si vous avez d’autres questions.

Bonne soirée,

Pierre-Jean


#3

Bonjour Pierre-Jean,

Merci beaucoup pour votre réponse.
Je regarde ça de suite !

Lisa


#4

Bonjour Pierre-Jean,

J’ai passé les textes en em mais si je mets à 100 % mes blocs textes, ils dépassent de ma composition…

Une idée ?

Belle journée à vous.
Lisa


#5

Bonsoir Lisa,

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.

Bonne soirée
Pierre-Jean


#6

Bonjour Pierre-Jean,

Je vous remercie et vais regarder ça.

Très belle journée à vous.

Lisa


#7

Bonjour Pierre-Jean,

Ça marche bcp mieux !!! Merci !! Qu’en pensez vous ?

Par contre, je n’arrive pas a mettre le reCaptcha en responsive…

Je vous souhaite une très belle journée.

Lisa


#8

Bonjour Lisa,

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.


#9

Bonjour

On peut aussi il me semble utiliser vh pour les textes.

Pour les combo texte/image oui flexbox ou grid

J’ai noté un soucis lorsque l’on clique sur le bouton menu, comme le menu prend tout l’écran on a du mal à revenir en arrière :slight_smile:


#10

Oui on peut ultiliser les VH pour des largeurs/hauteurs fixes.

Pour le bouton, lui mettre un z-index supérieur à celui du Nav-menu. Acutellement le Bouton est à 0 alors que le nav-menu est à 1.


#11

Bonjour Pierre Jean,

Il est normal que le texte bleu chevauche la photo. Parlons nous de la même chose ?

Je vais essayer le custom attribute data-size = compact.

très belle journée à vous.
Lisa


#12

““Pour le bouton, lui mettre un z-index supérieur à celui du Nav-menu. Acutellement le Bouton est à 0 alors que le nav-menu est à 1.””

C’est ce que je viens de faire mais je ne comprends pas quel était le problème…:hugs:


#13

Nous evoquions le fait que l’utilisateur ne peut pas fermer et ouvrir le menu à sa guise, ce qui peut etre contre-intuitif surtout sur desktop.


#14

c’est tout à fait exact mais je ne sais pas comment l’ajouter !!