Posez votre question Signaler

Problème media query [Résolu]

- - Dernière réponse :  kodix - 12 juin 2016 à 20:16
Javascript / DHTML Posez votre question Signaler
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 

4 réponses

Signaler Commenter la réponse de jordane45
Messages postés
26137
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
23 août 2019
 314
0
Merci
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 ?

Commenter la réponse de jordane45
Signaler Commenter la réponse de kodix
0
Merci
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 ?
Commenter la réponse de kodix
Signaler Commenter la réponse de jordane45
Messages postés
26137
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
23 août 2019
 314
0
Merci
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;
 }




Commenter la réponse de jordane45
Signaler Commenter la réponse de kodix
0
Merci
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.
Commenter la réponse de kodix
Répondre Posez votre question