Coucou tout le monde ! première fois que je publie par ici héhé !
Alors voilà, j'ai créé mon site web sous wordpress en début d'année : www.plume-design.fr Je l'ai fais avec un page builder (elementor) parce qu'il me fallait une vitrine rapidement et d'ailleurs ce site m'a permis de ramener quelques clients pour le côté design. Ok ben alors c'est quoi mon problème ?
Je me forme actuellement au html / css / intégration / ux / tout ça. De plus, elementor et les page builder étant pour moi assez vite limités, je me suis dit que j'allais mettre les mains dans le cambouis. J'ai donc suivi les cours html / css, en décidant de refaire mon site au propre, à la main, tapé ligne par ligne. Il manque encore un peu de javascript et php mais ce n'est pas le sujet. Une fois mon squelette posé, mon css enfin terminé... là je me dis : eh mais... il est pas du tout responsive maintenant. donc je me penche sur les media queries, je comprend assez bien l'idée. Par contre, je ne sais pas du tout comment m'y prendre, j'ai tenté aujourd'hui mais c'est un peu une catastrophe, mon ami qui est ingénieur développeur m'a recommandé de copier coller mon code de base dans chaque media queries et de l'adapter en supprimant ce qui est superflux et en bidouillant les marges, tailles ,etc...
Cela veut donc dire que le nombre de lignes de css va etre multiplié par 3 ? (sachant que j'en ai 300 de base). là j'ai l'impression de faire énormément de bidouille, et de ne pas avoir un rendu propre, ça ne me plait pas vraiment... Je dirais bien que je vous poste l'intégralité de mon html css mais j'en ai pour 600 lignes et je ne veux assommer personne. Je sais qu'il y a des cours, je les aient lus en large et en travers mais mon site est plus complexe que les exemples montrés dans le cours :/
Non, il ne faut pas copier l'intégralité de ton code trois fois. Il faut juste modifier les points bloquants. Par exemple, si un de tes éléments a une largeur définie de 1200px, il faut remettre cette valeur sur "auto" via un media query quand on atteint les 1200px de large sur le viewport (un peu avant en fait, pour éviter tout souci).
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
@media only screen and (min-device-width : 0px) and (max-device-width : 767px){
/* Styles pour cette Media Queries smartphone*/
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles pour cette Media Queries tablette*/
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles pour cette Media Queries dimension supérieure aux tablettes */
}
(les données entrées sur le min-device-width ont été faites sur des sources trouvées un peu hasardeuses, s'il y a des choses à redire, n'hésitez pas), du coup si je ne copie / colle pas l'intégralité de mon code de base, lorsque je passe d'une dimension à une autre, je me retrouve avec uniquement le squelette html (ce qui est logique vu ce que j'invoque avec les media queries). Je crois que c'est sur ça que je bloque en fait
de mon coté, tout est bloquant sur mon design haha c'est vrai que je l'ai clairement pensé pour ma résolution (erreur !), c'est quand je me suis rendue compte à la fin que ça n'allait pas du tout sur le mode responsive que j'ai tilté...
du coup, j'ai tenté ta technique et j'ai fais un essai tout bête de faire disparaitre mon header pour voir si ça réagissait, voilà mon code
résultat, rien ne bouge, le header ne disparait pas
edit: ok ouais j'ai trouvé... x) j'ai placé la media querie avant le header de base, et non après... donc forcément... merci encore, ce coup ci c'est bon
- Edité par Delphine57 12 juin 2018 à 22:48:03
Adapter mon site web en responsive
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !