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 :/

Merci à vous !

Salut,

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).

hey merci de ta réponse

alors du coup y a un truc que j'ai pas saisi...

si je tape ces media query:

@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

-
Edité par Delphine57 12 juin 2018 à 22:05:11

Ce serait plutôt :

/* css de base, s'applique à tous les cas */

.element {
    width: 1200px;
    padding: 0 2rem;
    background: blue;
}

/* media queries */
@media (max-width: 1280px) {
    .element {
        width: auto;
    }
}

Et pars plutôt sur min-width et max-width que sur min-device-width et max-device-width.

-
Edité par EmmanuelBeziat 12 juin 2018 à 22:07:55

Pas de souci.

Cherche les points "bloquants" de ton design, et à partir de quel moment ils bloquent.

alors je reviens (déjà).

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

@media (max-width: 640px) {
	header {
		display:none;
	}
}

la suite du css de base

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