Partage

[HELP] Afficher mon site correctement sur telephon

17 mai 2017 à 21:33:45

ok./

-
Edité par MattéoLeclercq 29 octobre 2017 à 21:13:56

17 mai 2017 à 21:57:18

Hello,

Si tu as "coder avec le cul" faut pas chercher bien loin ^^ 

Et toutes ces valeurs en %, des margin et padding, laisse respirer tes conteneurs qui prendront la taille selon le contenu. Une fois fait tu as les medias-queries pour ajuster le positionnement selon la taille du navigateur.

Le mieux serait de poster directement le lien au site.

17 mai 2017 à 22:35:57

dsqdsq

-
Edité par MattéoLeclercq 29 octobre 2017 à 21:14:14

17 mai 2017 à 23:15:18

Rien qu'en supprimant les margin du <body>, remplacés par :

max-width: 960px;

margin: 10px auto;

j'obtiens ceci avec une fenêtre de 600px

En dessous de environ 600, on touche ce que l'on appel un point de rupture. Une règle CSS medias-queries serait nécessaire.

Ici -> https://www.alsacreations.com/article/lire/930-css3-media-queries.html 

Ou la -> https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/mise-en-page-adaptative-avec-les-media-queries 

 J'ai rajouté aussi cette ligne dans le head (pour le ratio sur mobile). 

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0">

Choisir son viewport-> https://www.alsacreations.com/article/lire/1490-comprendre-le-viewport-dans-le-web-mobile.html 

Ensuite il faut travailler sur le positionnement et la tailles des autre éléments, ainsi de suite. Utilise l'inspecteur d'éléments de ton navigateur (outils de développement F12) pour faire des tests.

Bon je n'ai fait que bidouiller pour montrer que c'est possible, mais il faudra revoir la copie en évitant tous ces %...

Si tu fais une mise en page que se positionne bien en réduisant la fenêtre de ton navigateur + quelques @medias + le viewport alors tu devrais avoir un bon design sur mobile.

-
Edité par Lucky13 17 mai 2017 à 23:25:18

18 mai 2017 à 19:24:54

ezfd

-
Edité par MattéoLeclercq 29 octobre 2017 à 21:14:37

18 mai 2017 à 20:28:50

t'as oublié le "." devant all1 c'est une classe donc :

.all1 {
    display: block;
}

Sinon il le prendra pas en compte :)

Mon portfolio / Nouveau projet -->Expedition wars/  Le CSS ça peut craindre -->Conférence CSS3.CREATE

[HELP] Afficher mon site correctement sur telephon

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
  • Editeur
  • Markdown