Problème media queryRésolu

Question

Bonjour, Je travail sur un site qui utilisera media queries de css pour le responsive design. J'ai ce code css abrégé : @media screen and (max-width: 400px) {#nom_site { font-size:10px;}#desc{ font-size:14px; }} et toujours abrégé

1234

plus loin dans le code

4567

Le style s'applique bien à nom_site mais pas à desc. Dans ce cas je travail avec les id mais j'ai essayé avec les classes et j'ai le même problème avec les mêmes éléments. Pouvez vous m'aider ? Merci PS : Ce que je souhaite c'est des pistes. Par expérience je sais que si je donne le code en entier j'aurais plus de questions (sur d'autres points) que de réponses. Il y a des dizaines de code js et css à analyser dans le code du site wordpress.

jordane45 · Answer

Bonjour, 1 - As tu bien mis des quotes autour des id ?

4567

2 - (max-width: 400px) ne s'applique que lorsque la fenêtre du navigateur ne fait que (au maximum) 400px. Si tu testes sur ton ordi... penses à réduire la largeur de la fenêtre de ton navigateur pour "simuler" la dimension. 3 - Quand tu examines l'élément en utilisant les outils du navigateur internet (je te conseille de passer par firefox (et même d'installer le plugin firebug)), qu'est ce qui apparait ? Peux tu nous en mettre une capture écran ?

kodix · Answer

Merci pour la réponse.

Il y a des doubles quotes, mais même sans quote ça fonctionne quand il n'y a pas de problème.

Oui j'ai bien réduit la taille.

Voici une capture du code desc : http://imageshack.com/i/pobtvgQcp

Précision importante si j'isole le code media-queries.css dans un nouveau fichier avec juste un petit bout de code, ça fonctionne.

Qu'est ce qui peut interférer avec les media queries ? Et seulement en partie ?

jordane45 · Answer

Dans la zone de droite de la capture .. tu peux voir les différents styles appliqués à ton élément.

Il faudrait regarder parmi cette liste si tu distingue quelque chose en rapport avec le font-size et depuis quel fichier/élément il est chargé.

Et aussi... comme tu peux le constater il y a des styles hérités d'autres éléments.... il y a peut être un "conflit" .

Eventuellement tu peux essayer en précisant dans ton css que le tient est plus "important".

#desc{
	font-size:14px !important;
 }

kodix · Answer

Merci j'ai réussi à trouver ce qui bloquait, un style d'un élément parent.
Ce qui est bizarre c'est que même des élément non enfants de ce style avait des problèmes.

En tout cas ça fonctionne.

Merci aussi pour l'astuce de la "zone de droite" qui m'a servi et me reservira.

Problème media query

4 réponses

Votre réponse