Mes salutations à tous et à toutes (vu l'heure, je crois que c'est mieux comme ça non?)

Alors, voilà : Je créé un site internet que j'ai voulu responsive. Jusqu'à présent je verifiais l'affichage des pages en changeant les dimensions de la fenêtre du navigateur, ou alors en utilisant la vue adaptative sur firefox et tout s'affichait comme je voulais. Mais il y a quelque minutes, j'ai appris qu'on peux visiter son site web en local depuis son mobile. Alors, j'ai suivi la procédure et là, le site s'affichait en dezoomé. Aucune de mes propriétés média queries ne semblent avoir été prisent en compte :

@media all and (max-device-width:480){ bla bla css}

À l'intérieur je met un bloc en display :none (bloc qui est pourtant toujours là) et je recentre le texte.

J'aimerais savoir par où j'ai péché. Pourquoi ça ne marche pas?(je suis au bord du bord là...)

Merci de me redonner espoir en me donnant des pistes de solutions 🙏

-
Edité par Dr_strange 12 août 2017 à 2:44:46

Bonjour, la seule chose que je peux te dire c'est; essaye avec 

@media all and (max-width) au lieu de max-device-width, sinon, il faudrait voir le code pour te dire

Assures-toi également qu'il y a bel et biens un espace entre "and" et tes parenthèses.

Bonne chance! :) 

Bonjour et merci à tous les deux.

Avant de faire un "max-device-width" j'avais mis "max-width" :l'un comme l'autre ne fonctionnent pas. Ce qui me trouble le plus c'est le fait que le responsive fonctionne lorsque je réduit la taille de la fenêtre du navigateur sur PC. Je ne comprends pas pourquoi ça ne fonctionne pas lorsque j'accede au site en local depuis l'id de connexion ?

Quelqu'un aurait-il une idée ? Je suis perdu.

Merci

-
Edité par Dr_strange 12 août 2017 à 12:44:04

Je me suis rendu compte que le style ne s'applique sur mon smartphone qu'à partir  de 800px ie max-width:800px : je suis sur Android. Il faut ajouter le 'device' devant max pour que le style s'applique pour un maximum de 480px. Le cour le dit d'ailleurs. 

Fait curieux: lors du chargement de la page, j'ai le temps de remarquer que le style entre les {} de mon @media s'applique bel et bien (ourah!!!). Mais hélas ça ne dure que le temps du chargement et on revient à la bonne vielle page en dezoomé. Et dès lors, toutes les modifications que j'effectue dans le @media{} s'appliquent sur le site dezoomé 😵

-
Edité par Dr_strange 12 août 2017 à 21:52:00

Salut AbcAbc6 je travail en local je ne pense donc pas que vous puissiez accéder à mon site... Et se serait inutile de toutes façons parce que j'ai trouvé ce qui clochait!!! Je suis super heureux là tout de suite! 

Alors voilà: j'avais des break points dans ma feuille de style (4 au total) donc 4 fois @media (...){ ...}

Mais en dehors de ceux-ci,  j'avais aussi des lignes de code pour la mise en forme du site ( lignes qui se répétaient dans les queries avec des valeurs différentes) . Je pense que cela a généré un conflit et le navigateur choisissait à chaque fois d'interpréter le style se trouvant en dehors des queries.

J'avais un truc comme ça :

P{

color: blue;

}

@media all and (max-device-width:480px){

P{

color: red;

}

}

@media all and (min-device-width: 481...

P{

coloris: green;

}

}

Bref j'ai choisi d'utiliser une feuille de style pour chaque breakpoint et ça fonctionne!!!😁

Merci à tous de vous êtres penché sur mon problème : David Gaulin, AmiNE40, AbcAbc6 🙏

-
Edité par Dr_strange 13 août 2017 à 0:33:07