28172 sujets

CSS et mise en forme, CSS3

Problème avec la détection mobile sur ShortStack

Bonjour

J'ai (encore) un problème auquel je ne trouve pas de solution sur ShortStack (développement d'appli pour Facebook.)

Je souhaite dissocier le CSS pour mobile du CSS pour ordinateur. Donc je viens sur AlsaCréations pour lire un tuto, je trouve : http://www.alsacreations.com/article/lire/930-css3-media-queries.html

Parfait ! Mais la règle @media handeld ne me donne aucun résultat. Donc je dois faire quelque chose de travers. Smiley ohwell

Voilà ce que j'ai dans ma feuille CSS :

@media handheld {
  
 #promotion {
    margin-right: 0px;
  }


(L'objectif de ce code est que la marge ajoutée à la zone #promotion ne soit pas appliquée en mobile, où elle n'arrange rien. Aussi, je n'ai pas la possibilité, à ma connaissance, de créer plusieurs feuilles CSS.)

Je ne peux malheureusement pas donner le vrai lien de l'application (encore confidentielle...) mais voici un exemple d'application ShortStack : https://www.facebook.com/LyonConfluence/app_197602066931325

Merci d'avance de votre aide ! (Et merci pour toutes les fois où j'ai pas besoin de publier sur le forum ^_^ )
Bonjour et merci !

Bon ça ne marche pas non plus avec un @media screen.

Mais je pense que mon problème doit être entre le fauteuil et le clavier Smiley cligne
J'abandonne ce point là, merci de ton aide Spacedementia !
De rien, effectivement je pense que tu un souci autre part. Ce code doit fonctionner...
A bientôt. Smiley cligne
Modifié par Spacedementia (27 Sep 2012 - 18:23)
Ahah, oui, "à bientôt" c'est certain ^-^

Je suis un amateur qui se retrouve à devoir faire des choses toutes bizarres ! Vous vous rendez pas compte comme ce site m'est utile !! Smiley lol

Donc merci² même !
Ou alors c'est peut être lié à l'ordre dans ton CSS. Le code suivant doit être positionné après ta première déclaration de margin appliquée à "#promotion". Pour lui permettre de prendre le dessus sur ton CSS de base que tu souhaites remplacer.

@media handheld {
  
 #promotion {
    margin-right: 0px;
  }

Modifié par Spacedementia (27 Sep 2012 - 18:25)
Ah mince j'avais pas vu ta réponse ! Smiley ohwell

Alors non, ce n'est visiblement pas ça; j'avais bien mis les @media à la fin de la feuille CSS.

Mais le problème venait de mon code, il me manquait des } donc forcément ça marchait pas !

Merci encore de ton aide Smiley lol
Modifié par Glxblt (07 Feb 2013 - 12:26)
Pas de problème. Smiley cligne
Ok forcément ce genre d'erreur ne pardonne pas (tout le code situé après l'erreur ne sera pas interprèté). ^^
Voici un petit outil qui pourrait t'intéresser à l'avenir, il permet dans la théorie (je n'utilise pas ce genre d'outil) d'indiquer les erreurs présentes dans ton CSS :
>>> csslint.net

A bientôt sur le forum !
Sujet clos
Aller à