[Résolu] Bug taille de texte au-delà 89 caractères

Bonjour à tous.
"Bug taille de texte au-delà 89 caractères" mais pas que... quand je rajoute un titre ou n'importe quel élémens que ça soit entre le header et le footer de mon body.
J'ai déjà posé mais question mais n'ai pas obtenu de réponse donc je la refais en encore plus clair et concis :

Alors voilà, j'ai une page HTML avec un header, un footer, un menu latéral et bien sûr, du contenu.
Il est parfaitement sizé pour ordinateurs et mobiles (grâce à une fonction de mon invention qui est : @media screen and (max-aspect-ratio: 7/8) and (min-height: 1100px){ /* ICI MON CODE*/ }
Le contenu est super bien ajusté sur les mobiles, comme ceci :
https://image.noelshack.com/fichiers/2019/27/7/1562533723-bonneforme.jpg , notamment grâce à html{font-size: 200%} dans ce media query.
Je précise que TOUTES mes tailles de polices et paddings entre les divs / textes sont en "rem".
Mais le problème est que, quand je dépasse le nombre précis de 89 caractères, le texte ressemble d'un seul coup à ça :
https://image.noelshack.com/fichiers/2019/27/7/1562533942-mauvaiseforme.jpg
Mais ce uniquement sur mobiles (donc avec le media query donné précédemment)...
J'ai visualisé ça avec l'outil développeur Chrome -> Device toolbar (Ctrl + Shift + I puis Ctrl + Shift + M)

Là je fais un peu style de rien mais ça fais des jours que je galère un peu partout et personne n'a su me donner de réponse...

J'ai mis la page en ligne pour que vous puissiez l'observer :
http://vincentvincent.rf.gd/l-histoire.html

Je vous remercie d'avance de votre aide.

Salut

Pourrais également faire un exemple avec moins de 89 chars ? pour voir le rendu réellement voulu avec les plus de 89 chars ?

C'est le premier lien que j'ai donné.
https://image.noelshack.com/fichiers/2019/27/7/1562533723-bonneforme.jpg
je souhaiterai que tout mon texte ressemble à ça.
Merci

oui, mais est-il possible de le voir sur ton site ? et pas en photo ?

Oups... d'accord
Voilà : http://vincentvincent.rf.gd/l-histoire.html

Ok merci

Perso, j'ai la même chose que ce soit le text court ou le text long... hmmm curieux..

EDIT : ah non pardon, il faut que je mette en mode mobile.
Modifié par JENCAL (08 Jul 2019 - 16:04)

Avez vous testé avec l'outil développeur Chrome "Device toolbar" ?
Ça ne fait ça que sur les mobiles (donc avec le media query @media screen and (max-aspect-ratio: 7/8) and (min-height: 1100px){ /* ICI MON CODE*/ } )

Pour y accéder :
Ctrl + maj + I (ou "Inspecter") puis Ctrl + Maj + M

Anthony_E_B a écrit :
Avez vous testé avec l'outil développeur Chrome "Device toolbar" ?
Ça ne fait ça que sur les mobiles (donc avec le media query @media screen and (max-aspect-ratio: 7/8) and (min-height: 1100px){ /* ICI MON CODE*/ } )

Pour y accéder :
Ctrl + maj + I (ou "Inspecter") puis Ctrl + Maj + M

Oui merci, j'ai "édité" mon poste

Je t'avoue que la je ne comprend pas trop ... même en mettant les font size en pixel cela ne résout pas.

Oui c'est très très bizarre je sais
Je me casse la tête là-dessus depuis des jours et c'est parfaitement incompréhensible... J'ai fais vérifier mon html par des applis en ligne de vérification syntaxique et tout va bien... C'est vraiment fort j'ai jamais vu ça.

Je sais plus quoi faire et ça me bloque vraiment.

Alors y'a des solutions tkt pas, je t'aiderais, mais par contre j'essaye de comprendre le pourquoi du comment

et ce que je constate c'est ceci :

Il y a réellement deux font size différent :



L'un a 34px, et l'autre 47.
Je ne comprend toujours pouquoi. je pense que c'est lié à la taille et au % ou au "rem" que tu utilise.

Cela à l'air d'être lié au height du <p>
Car si tu met dans les deux cas un forcing de height:800px le problème n'apparait plus.

Merci infiniment !
J'ai constaté ça aussi, et j'ai vérifié et je n'ai pas fait d'autres media queries modifiant la taille du texte que celui là.
Normallement la valeur du "rem" ne varie pas, elle est calculée à partir de 16px (= 100% = 1rem à la base). Donc quand je fais html{font-size: 200%} je change la valeur racine de 16 à 32px. Donc normallement un font-size de 2rem sera de 32px sans le media query et de 64 avec, et donc un font-size de 1rem (comme ce qu'il y a dans mon CSS pour les paragraphes) devrait faire 16px sans media query et 32 avec, pas 42.7...
Ce que j'arrive encore moins à comprendre c'est d'où vient cette valeur ? Si jamais il y avais un conflit et que le media query agissait 2 fois, au pire le texte serait de 64 px, pas 42.7
J'ai fais le calcul et la taille du texte est 2,66875 fois plus grande au lieu de simplement 2 fois plus grande... de plus en plus sombre tout ça.

EDIT : Je viens de voir ta solution, je la teste tout de suite
Modifié par Anthony_E_B (08 Jul 2019 - 16:36)

Je ne sais comment te remercier. Il y a décidément des choses pour lesquelles je ne suis pas prêt en développemenr web apparemment haha.
Mille mercis d'avoir pris de ton temps pour m'aider, je te suis tellement reconnaissant !
Je passe le sujet en résolu !
Bonne continuation

De rien avec plaisir mais je t'avoue que la solution du height 100% et un peu tuchy car j'ai pas trop compris le pourquoi du comment ça fonctionne....

mais bon...

Anthony_E_B a écrit :
C'est le premier lien que j'ai donné.
rachat crédit consommation
je souhaiterai que tout mon texte ressemble à ça.
Merci

Dommage qu'on ne vois pas l'image pourtant j'avais tellement envie de donner mon avis!