Width 100% non conforme
Résolu
Sinistrus
Messages postés
1010
Date d'inscription
Statut
Membre
Dernière intervention
-
Sinistrus Messages postés 1010 Date d'inscription Statut Membre Dernière intervention -
Sinistrus Messages postés 1010 Date d'inscription Statut Membre Dernière intervention -
3 réponses
Salut,
Il semble que ce soit plutôt la largeur des table et div fixé à 1024px qui provoque cette marge.
Par exemple le div contenant le logo a une largeur fixé à 1024px ainsi qu'un padding de 10px de chaque coté, donc la largeur minimum de la page sera toujours 1044px.
Pour corriger le problème d'affichage sur un écran plus petit que 1044px, tu peux ajouter un taille minimum à la page :
Néanmoins l'utilisateur devra toujours scroller pour voir la partie droite de la page.
Bonne journée
Il semble que ce soit plutôt la largeur des table et div fixé à 1024px qui provoque cette marge.
Par exemple le div contenant le logo a une largeur fixé à 1024px ainsi qu'un padding de 10px de chaque coté, donc la largeur minimum de la page sera toujours 1044px.
Pour corriger le problème d'affichage sur un écran plus petit que 1044px, tu peux ajouter un taille minimum à la page :
body {
min-width: 1044px;
}
Néanmoins l'utilisateur devra toujours scroller pour voir la partie droite de la page.
Bonne journée
Bonjour Pitet et désolé du retard de réponse, j'étais en déplacement.
J'ai effectivement tenté le min-width, mais ça n'a pas "vraiment" fonctionné.
J'ai donc essayé autre chose :
Mais là, lorsque je tiens ma tablette en paysage c'est correcte sauf que j'ai une marge de 10 ou 15px à droite seulement, et en portrait c'est pas bon.
Je fais quelques tests supplémentaires et te reviens si j'ai du nouveau :s
J'ai effectivement tenté le min-width, mais ça n'a pas "vraiment" fonctionné.
J'ai donc essayé autre chose :
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0, user-scalable = yes">
@media only screen and (min-device-width: 1280px){html {-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;} body{min-width: 1044px;}}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape){html {-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;} body{min-width: 1044px;}}
@media only screen and (max-device-width: 768px) and (orientation: portrait){html {-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;} body{min-width: 1044px;}}
Mais là, lorsque je tiens ma tablette en paysage c'est correcte sauf que j'ai une marge de 10 ou 15px à droite seulement, et en portrait c'est pas bon.
Je fais quelques tests supplémentaires et te reviens si j'ai du nouveau :s