1. Accueil
  2. Codes-Sources
  3. Javascript / DHTML

Problème media query [Résolu]

Signaler
-
 kodix -
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é 
<div id=nom_site>1234</div> plus loin dans le code <div id=desc>4567</div>

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.
Afficher la suite
A voir également:

4 réponses

Réponse 1 / 4
Messages postés
28009
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
2 avril 2020
 324
Bonjour,

1 - As tu bien mis des quotes autour des id ? 
 <div id='desc'>4567</div>


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 ?

Réponse 2 / 4

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 ?
Réponse 3 / 4
Messages postés
28009
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
2 avril 2020
 324
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;
 }




Réponse 4 / 4

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.
Répondre Posez votre question