1493 sujets

Web Mobile et responsive web design

Regle de prio pour les media query

bonjour a tous

y a t il des rêgles de priorité sur les media query, j'utilise celui ci :

@media only screen and (max-device-width:640px), only screen and (max-width:640px) {}

mon probleme parce qu'il en fallait un est que :

en version normale j'ai sur un input
un margin-left: 230px !important;

en version mobile j'ai sur un input
un margin-left: 0; (pour que ca ne sorte et qu'il n'y ait pas de scroll)

alors si je garde le important la version mobile ne fonctionne pas (margin:0 pas prit en compte) du coup y a le scroll
si j'enlève le important c'est le style mobile qui passe prio et le bouton s'aligne a droite....

que dois je faire
Les media queries n'ajoutent à ma connaissance aucune priorité sur les sélecteurs.

Les règles si elles sont appliquées (et donc que la condition est vraie) suivront la priorité ordinaire des sélecteurs CSS.

Cela dit, !important fera passé la sélecteur en première priorité. C'est donc normal que si un !important est appliqué en version normale, la règle du media queries ne sera pas prioritaire...

Soit dit en passant, je crois que !important ne devrait jamais être utilisé sur une feuille de style normale. C'est vraiment se tirer dans le pied quand on veut changer la règle plus tard...
Administrateur
Bonjour,

audreyh78 a écrit :
si j'enlève le important c'est le style mobile qui passe prio et le bouton s'aligne a droite....

Hein ? En largeur normale, c'est pas possible ou alors tu as fait une erreur dans ta règle @media
Et en largeur mobile c'est évidemment voulu.

Je dirais pas que !important ne doit JAMAIS être utilisé mais si tu l'utilises, ça a intérêt à résoudre un vrai problème pas soluble autrement parce que c'est le début d'une longue suite d'ennuis, de rajout de poids dans d'autres sélecteurs, d'id dans le code HTML rien que pour avoir assez de poids toujours pour d'autres sélecteurs, etc
oui je suis au courant pour le !important il faut l'utiliser que quand c'est important Smiley biggrin mais en fait si je ne le mets pas le css du média passe en prio je ne sais vraiment pas pourquoi et si je le mets bah forcement le css des média s'applique pas logique certes mais embêtant.

J'ai oublié de dire que j'utilisais un cms qui est lifferay... mais la encore il n'y a pas de code de base qui empêche la surcharge de fonctionner.

Vraiment je ne comprend pas...
Peux tu nous mettre ici le contenu de ta media queries ?

Le problème risque de se trouver à ce niveau.
je peux vous mettre le code mais je crois vraiment que ca vient des input en fait parce que j'ai le mm problème sur un autre site.. et je suis obligé d'utiliser le !important pour que le CSS de la version mobile ne passe pas en prio.

Pour le code ca va etre compliqué car pour que ça fonctionne j'ai decidé de le mettre en look and feel dans le CMS et pas d&ns la feuille de style c'est moins pratique pour mon client mais au moins ca fonctionne.
Administrateur
J'ignore ce qu'est "look and feel" en parlant de CSS : du jargon propre à Liferay ?
Est-ce que tu as regardé le code de tes pages produit par ton CMS avec Firebug ou WDT/Code généré ? Sinon poste l'URL de ce site ici (pas le code pitié, ça va faire 3 km de long ou être parcellaire et inutile)
Felipe a écrit :
J'ignore ce qu'est "look and feel" en parlant de CSS


Y'a 5 heures je me suis dit : "dis pas que tu sais pas tu vas avoir l'air d'un con" (ou peut être plus un truc du genre : putain ça me gave les djeunz, j'ai envie de leur mettre des baffes)
Modifié par jb_gfx (11 Jul 2011 - 23:06)
Sujet clos
Aller à