Premier souci, tu as utilisé des dimensions en Pixelles ... donc fixes ...
Il faut que tu fasses du "proportionnel" ( pourcentage, em ... )
et, dans l'idéal, que tu te tournes vers les queries pour être en mesure de gérer ton affichage en fonction du materiel/résolution utilisée.
Le problème c’est que j’ai jamais utilisé de proportionnel, ni de queries, j’ai essayé plusieurs choses, je suis très amateur et si j’arrive pas à régler ce soucis cela me bloque dans le reste de mon projet et j’ai encore beaucoup à faire.
Je vais chercher de ce côté ce que je peux trouver...
Salut,
du proportionnel pourtant vous en utilisez dans vos premières règles CSS:
min-height: 100%;
100% c'est bien proportionnel à la page!
Par contre pas compris votre commentaire sur la ligne d'avant:
/* Préserve le ratio de l'image */
Quelle image? La règle étant sur la balise body c'est sur celle ci qu'elle s'applique et non sur une image.
Bref c'est simple , vos valeurs sont "fixées" et correspondent à un écran spécifique(le vôtre?)
width:72px;
height:50px;
Hors 72 pixels(et non pixelles) c'est plus ou moins d'espace selon la taille de l'écran et sa résolution.
Donc ça peut pas être juste pour tout les écrans.
Par contre
width:3%;
C'est 3% de la largeur du container de l'élément qui a le style, donc c'est 3% de n'importe quelle dimension.
Bien sûr j'ai mis 3% au hasard, c'est à vous d'indiquer la bonne valeur(et les autres bien sûr en proportions).
Il y aussi les media queries qui permettent d'indiquer plusieurs mises en page selon les échelles de dimensions que l'on veut. Parois ce sont les 2 méthodes qu'il faut employer parce que c'est difficile de tenir compte des rapports largeur*hauteur des résolutions possibles(notamment sur mobile mais aussi si l'utilisateur redimensionne sa fenêtre).
Je vais chercher de ce côté ce que je peux trouver...
Merci
du proportionnel pourtant vous en utilisez dans vos premières règles CSS:
100% c'est bien proportionnel à la page!
Par contre pas compris votre commentaire sur la ligne d'avant:
Quelle image? La règle étant sur la balise body c'est sur celle ci qu'elle s'applique et non sur une image.
Bref c'est simple , vos valeurs sont "fixées" et correspondent à un écran spécifique(le vôtre?)
Hors 72 pixels(et non pixelles) c'est plus ou moins d'espace selon la taille de l'écran et sa résolution.
Donc ça peut pas être juste pour tout les écrans.
Par contre
C'est 3% de la largeur du container de l'élément qui a le style, donc c'est 3% de n'importe quelle dimension.
Bien sûr j'ai mis 3% au hasard, c'est à vous d'indiquer la bonne valeur(et les autres bien sûr en proportions).
Il y aussi les media queries qui permettent d'indiquer plusieurs mises en page selon les échelles de dimensions que l'on veut. Parois ce sont les 2 méthodes qu'il faut employer parce que c'est difficile de tenir compte des rapports largeur*hauteur des résolutions possibles(notamment sur mobile mais aussi si l'utilisateur redimensionne sa fenêtre).
Explication en détails des media queries:
https://www.w3schools.com/Css/css3_mediaqueries_ex.asp