Tweet
Bonjour,
Je travaille toujours sur mon footer, et je rame avec la taille des polices.
Celles-ci ont une fâcheuse tendance à s'adapter à la largeur de l'écran sur lequel elles s'affichent, et ça fait passer certains textes sur deux lignes.
Non seulement c'est assez incohérent compte tenu de la faible importance des liens que contiennent ces textes, mais surtout ça me pose des problèmes au niveau de la taille du background image, qui se retrouve à être d'une hauteur insuffisante pour tout contenir, ce qui fait apparaître une bande blanche en bas d'écran.
Je précise que le problème n'est pas visible dans la vue adaptative de la console, mais uniquement sur les terminaux concernés (j'ai fait le test sur iPhone 7 et iPhone 7+ : le problème appraît en mode paysage).
Bref.
J'ai donc tâtonné longuement avec des pixels plutôt que des em, pensant bien qu'il s'agissait d'unités en valeur absolue, mais si ça donne d'excellents résultats dans la vue adaptative de la console, sur les iPhone, ça ne règle rien du tout.
Je me demande donc maintenant si je ne devrais pas prendre le problème par un autre bout : mettre le texte dans une div et lui affecter une largeur ? mais alors dans une media-query pour éviter des problèmes sur grands écrans...
Quelques images pour illustrer le problème :
D'abord, voici la capture du résultat obtenu avec mon CSS sur la vue adaptative. C'est nickel, c'est exactement ce que je veux :
Chaque ligne de texte reste sur 1 ligne. La font-size est définie en pixels (avant elle était en em, et je pensais avoir résolu mon problème en passant en pixels... mais non)
Voici maintenant la réalité, sur iPhone 7 : le texte grossit à proportion de la taille de l'écran, ce qui le fait passer sur deux lignes...
Enfin, voici pourquoi ça m'enquiquine de laisser ce texte passer sur deux lignes : l'image du background se retrouve un peu "débordée"
Donc : comment je peux faire pour obliger le texte à rester à la taille que je lui demande ? Visiblement pas avec la font-size...
J'ai pensé à une div, mais je ne vois pas trop comment faire :
si je me contente de donner une taille à cette div (disons 380 pixels puisque c'est la dimension occupée par le texte sur une ligne sur grand écran), j'ai un problème avec les petits écrans en mode portrait.
si je lui donne une taille plus petite, le texte sera illisible sur grand écran...
etc etc
Je pourrais peut-être affecter une taille "conditionnelle" gérée par une media query ?
Comme vous le voyez, je suis un peu perdue, je ne sais pas trop par quel bout prendre ce problème... Un coup de main serait bienvenu
Je travaille toujours sur mon footer, et je rame avec la taille des polices.
Celles-ci ont une fâcheuse tendance à s'adapter à la largeur de l'écran sur lequel elles s'affichent, et ça fait passer certains textes sur deux lignes.
Non seulement c'est assez incohérent compte tenu de la faible importance des liens que contiennent ces textes, mais surtout ça me pose des problèmes au niveau de la taille du background image, qui se retrouve à être d'une hauteur insuffisante pour tout contenir, ce qui fait apparaître une bande blanche en bas d'écran.
Je précise que le problème n'est pas visible dans la vue adaptative de la console, mais uniquement sur les terminaux concernés (j'ai fait le test sur iPhone 7 et iPhone 7+ : le problème appraît en mode paysage).
Bref.
J'ai donc tâtonné longuement avec des pixels plutôt que des em, pensant bien qu'il s'agissait d'unités en valeur absolue, mais si ça donne d'excellents résultats dans la vue adaptative de la console, sur les iPhone, ça ne règle rien du tout.
Je me demande donc maintenant si je ne devrais pas prendre le problème par un autre bout : mettre le texte dans une div et lui affecter une largeur ? mais alors dans une media-query pour éviter des problèmes sur grands écrans...
Quelques images pour illustrer le problème :
D'abord, voici la capture du résultat obtenu avec mon CSS sur la vue adaptative. C'est nickel, c'est exactement ce que je veux :
Chaque ligne de texte reste sur 1 ligne. La font-size est définie en pixels (avant elle était en em, et je pensais avoir résolu mon problème en passant en pixels... mais non)
Voici maintenant la réalité, sur iPhone 7 : le texte grossit à proportion de la taille de l'écran, ce qui le fait passer sur deux lignes...
Enfin, voici pourquoi ça m'enquiquine de laisser ce texte passer sur deux lignes : l'image du background se retrouve un peu "débordée"
Donc : comment je peux faire pour obliger le texte à rester à la taille que je lui demande ? Visiblement pas avec la font-size...
J'ai pensé à une div, mais je ne vois pas trop comment faire :
si je me contente de donner une taille à cette div (disons 380 pixels puisque c'est la dimension occupée par le texte sur une ligne sur grand écran), j'ai un problème avec les petits écrans en mode portrait.
si je lui donne une taille plus petite, le texte sera illisible sur grand écran...
etc etc
Je pourrais peut-être affecter une taille "conditionnelle" gérée par une media query ?
Comme vous le voyez, je suis un peu perdue, je ne sais pas trop par quel bout prendre ce problème... Un coup de main serait bienvenu
). Bref, tout ça pour vous présenter mes excuses de ne pas avoir réagi plus rapidement à vos réponses.
Commentaire