Media Query pour html{font-size: XXX%} pose problème

Bonjour à tous.
Je suis un peu nouveau ici, j'ai suivi de nombreux tutos & forums du site qui m'ont énormément aidés jusque-là mais cette fois-ci ma question ne s'y trouve pas, c'est pourquoi je la pose dans un nouveau forum.

J'utilise les media queries pour rendre mon site plus "responsif" et accesible aux mobiles. J'ai vu de nombreuses solutions sur le net pour ça mais j'ai fini par trouver moi-même la formule qui me convenait le mieux pour l'affichage sur les mobiles :

@media screen and (max-aspect-ratio: 7/8) and (min-height: 1100px) { /* ... */ }

J'en suis énormément satisfait jusque là (j'en profite pour vous demander votre avis sur cette méthode parce que je ne suis pas sûr qu'elle soit très bonne...), mais depuis hier j'ai un colossal problème...
Je me sert donc de ce media query pour augmenter la taille de la police sur les mobiles, comme je l'ai déjà dis ça marche nickel etc.
(voici le code pour tous les appareils :

html{font-size: 100%}

et celui pour les mobiles :

@media screen and (max-aspect-ratio: 7/8) and (min-height: 1100px){ html: font-size: 190% }

.)

J'ai décidé de modifier des éléments de mon footer (ici des sections) avec le code

float: none

que j'intègre dans un media query indentique à celui du HTML (la valeur que j'ai mise à la base pour le float de mes sections est

float: left

.
Et lorsque j'entre et sauvegarde ce code destiné aux sections du footer... le texte est pratiquement 2 fois plus gros sur quasiment tous les éléments de la page (pour les mobiles) !
J'ai eu beau chercher des heures c'est absolument incompréhensible pour moi... Si quelqu'un sait comment m'aider... je le remercie du fond du coeur.

PS: J'ai bien mis mes media queries après le CSS normal des éléments originaux.
PS #2 : J'utilise l'outil développeur de Chrome pour visualiser la simulation d'affichage mobile. Je m'en sert depuis longtemps et simule correctement un mobile.
Merci beaucoup de prendre le temps de lire ceci !

EDIT : Toutes mes polices et certains paddings sont bien en rem. Je n'ai pratiquement aucune valeur en px dans mon code d'ailleurs. (J'utilise notamment les rem, %, vh, vw)
Modifié par Anthony_E_B (04 Jul 2019 - 14:48)

Salut,


J'ai pas bien compris.

Anthony_E_B a écrit :
le texte est pratiquement 2 fois plus gros sur quasiment tous les éléments de la page (pour les mobiles) !

Avec un font-size:190% c'est normal non ? 190% c'est quasiement 2 fois plus que 100%.
Du coup je pense que j'ai pas bien compris ce que tu as fait.

Tu peux nous donner le code complet ? Ton site est en ligne ? S'il ne l'est pas tu peux reproduire le problème dans un fiddle par exemple : https://jsfiddle.net/

Tu peux aussi tester sans le ratio, juste avec la largeur d'écran c'est peut etre plus rapide.

Bonjour. Merci de votre réponse.
Je peux difficilement mettre ça dans un fiddle... C'est assez complexe.
Je vais plutôt illustrer ça avec des photos, ce sera plus simple.
Et non, le site n'est pas encore en ligne...

Le fameux site, affiché sur un ordinateur, ressemble à ceci :
https://image.noelshack.com/fichiers/2019/27/4/1562246355-capture-d-ecran-9.png

AVEC le code qui pose problème (@media screen and (max-width: 700px), screen and (max-aspect-ratio: 7/8) and (min-height: 1100px) {
.ftrsection{
float: none;
padding-left: 10vw;
max-width: 90vw;
margin-bottom: 1.5rem;
}
}
ET bel et bien AVEC le @media screen and (max-aspect-ratio: 7/8) and (min-height: 1100px) { html{font-size: 190%} }) ressemble à ceci :
https://image.noelshack.com/fichiers/2019/27/4/1562246509-capture-d-ecran-10.png

Et sans ce code qui pose problème, il s'affiche parfaitement bien sur les mobiles, comme ceci :
https://image.noelshack.com/fichiers/2019/27/4/1562246572-capture-d-ecran-11.png

Le code qui fait tout beuguer ne sert qu'à faire le footer de ça (ici visualisé via l'outil de développement de Chrome en mode simulation d'un Galaxy Note 3):
https://image.noelshack.com/fichiers/2019/27/4/1562246742-mauvais.png

à ça :
https://image.noelshack.com/fichiers/2019/27/4/1562246742-bon.png
(ici en affichage PC, mais j'aimerai justement que ça s'affiche comme ça sur mobiles)

Merci !
Modifié par Anthony_E_B (04 Jul 2019 - 15:30)

Je ne vois pas vraiment ce qui peut clocher... Sans visibilité c'est assez dur..

Ton code final ressemble à ça ?

@media screen and (max-width: 700px), screen and (max-aspect-ratio: 7/8) and (min-height: 1100px) {
    .ftrsection{
        float: none;
        padding-left: 10vw;
        max-width: 90vw;
        margin-bottom: 1.5rem;
    }
}
@media screen and (max-aspect-ratio: 7/8) and (min-height: 1100px) {
    html{
        font-size: 190%
    }
}

Si tu te met sur le footer dans l’éditeur de code il n'y a pas de différence ? pas de CSS qui se rajoute ?

Comment est défini la taille du texte pour le footer ?

Anthony_E_B a écrit :
Toutes mes polices et certains paddings sont bien en rem. Je n'ai pratiquement aucune valeur en px dans mon code d'ailleurs. (J'utilise notamment les rem, %, vh, vw)

Mes tailles de texte & paddings du footer sont en rem aussi...
Pour les éléments concernés, oui mon code des media queries ressemble à ça. Sinon les valeurs initiales sont différentes.
J'ai posté les pages sur lesquels ces problèmes sont visibles. Vous aurez une meilleure visibilité.

http://vincentvincent.rf.gd/
http://vincentvincent.rf.gd/l-histoire.html

Sur la deuxième page c'est le fait d'avoir un paragraphe qui rend tous les textes plus gros... C'est parfaitement incompréhensible.

Si vous avez le moindre problème pour accéder au site faites m'en part, mais normalement tout est OK.
Merci.