Posez votre question Signaler Répondre au sujet

Problème media query [Résolu]

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

Répondre au sujet
Signaler Commenter la réponse de jordane45
jordane45 20567 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 20 avril 2018 Dernière intervention - 12 juin 2016 à 14:35
0
Utile
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
kodix - 12 juin 2016 à 15:07
0
Utile
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
jordane45 20567 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 20 avril 2018 Dernière intervention - 12 juin 2016 à 17:16
0
Utile
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
kodix - 12 juin 2016 à 20:16
0
Utile
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
Posez votre question
S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.