Problème media query [Résolu]

Question

Posez votre question Signaler

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

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

Votre réponse

Répondre au sujet

4 réponses

Votre réponse

Répondre au sujet

Posez votre question

jordane45 · Answer 1

Signaler Commenter la réponse de jordane45

jordane45

Messages postés: 23247
Date d'inscription: mercredi 22 octobre 2003
Statut: Modérateur
Dernière intervention: 16 novembre 2018

- 12 juin 2016 à 14:35

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 ?

kodix · Answer 2

Signaler Commenter la réponse de kodix

kodix - 12 juin 2016 à 15:07

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 ?

jordane45 · Answer 3

Signaler Commenter la réponse de jordane45

jordane45

Messages postés: 23247
Date d'inscription: mercredi 22 octobre 2003
Statut: Modérateur
Dernière intervention: 16 novembre 2018

- 12 juin 2016 à 17:16

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;
 }

kodix · Answer 4

Signaler Commenter la réponse de kodix

kodix - 12 juin 2016 à 20:16

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.

Problème media query [Résolu]

Votre réponse

Votre réponse

Votre réponse

Vous n'êtes pas encore membre ? inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Vous n'êtes pas encore membre ?

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