[HELP] Afficher mon site correctement sur telephon

Anonyme

17 mai 2017 à 21:33:45

ok./

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

Lucky13

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.

❶ Feuille de style introuvable ❷ Chemins relatifs et absolus ❸ addEventListener & API Selectors ❹ Paletton colors ❺ Animations complexes en JS & CSS

Anonyme

17 mai 2017 à 22:35:57

dsqdsq

-
Edité par Anonyme 29 octobre 2017 à 21:14:14

Lucky13

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

❶ Feuille de style introuvable ❷ Chemins relatifs et absolus ❸ addEventListener & API Selectors ❹ Paletton colors ❺ Animations complexes en JS & CSS

Anonyme

18 mai 2017 à 19:24:54

ezfd

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

stefde3

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

Le CSS ça peut craindre -->Conférence CSS3.CREATE