Partage

Adapter mon site web en responsive

12 juin 2018 à 21:26:32

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
J
e 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 !

Vous êtes demandeur·se d'emploi ?
Sans diplôme post-bac ?

Devenez Développeur·se web junior

Je postule
Formation
courte
Financée
à 100%
12 juin 2018 à 21:54:38

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

Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
12 juin 2018 à 22:02:01

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 DelphineBertrand1 12 juin 2018 à 22:05:11

12 juin 2018 à 22:05:17

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 rhooManu 12 juin 2018 à 22:07:55

Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
12 juin 2018 à 22:08:49

ah ben oui >< oui oui tout à fait ! je vais tester ça et voir ce que ça donne, je reviens par ici plus tard ;) merci pour cet éclaircissement
12 juin 2018 à 22:10:40

Pas de souci.

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

Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
12 juin 2018 à 22:26:23

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 DelphineBertrand1 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é.
  • Editeur
  • Markdown