CSS + Media Queries Résolu/Fermé

Question

Bonjour, 


Je souhaite utiliser les Media Queries sur mon site web afin de faire disparaître une image sur les écrans de smartphone :

Voici mon site : https://www.paca-decouverte.fr/

Comme vous pouvez voir, en dessous des miniatures des départements, j'ai une grand image d'un pont, et cette dernière est toute moche sur un smartphone, et du coup j'aimerais qu'elle disparaisse sur ces appareils...

J'ai testé ceci :

@media screen and (max-width: 1280px) {                                            .j-module n j-htmlCode  {display:none;}                                            #cc-m-6780025062 {display:none !important;}                                            }

Mais cela ne fonctionne pas...

J'ai également essayé @media all and (min-device-width: 1280px) qui fonctionne autre part dans mon code pour une autre propriété, mais cela ne fonctionne pas non plus, du coup j'aimerais votre aide pour me dire ce qui ne va pas dans mon code et pourquoi ???

Cordialement.

Configuration: Windows / Chrome 60.0.3112.90

Pitet · Answer

Salut,

Le code de ton message est bon mais tu as une erreur de syntaxe dans ton css quelques lignes plus haut : tu as un "*/" tout seul à la fin de la ligne /*icône accueil*/ ce qui empêche le navigateur de lire correctement la règle css suivante, en l’occurrence la media query.

/*icône accueil*/  li#cc-nav-view-1198998562 a { background: url("https://image.jimcdn.com/app/cms/image/transf/dimension=40x40:mode=crop:format=png/path/s720532a5ff7f8ce4/image/i76293b44f7a48dae/version/1495961385/image.png") no-repeat scroll right top transparent; background-color: #eee ; background-position: 2px 0px; padding-left: 40px !important;} */

/*@media all and (min-device-width: 1280px) {*/
@media screen and (max-width: 1280px) {
    .j-module n j-htmlCode  {display:none;}
    #cc-m-6780025062 {display:none !important;}
}


A corriger en

/*icône accueil*/  li#cc-nav-view-1198998562 a { background: url("https://image.jimcdn.com/app/cms/image/transf/dimension=40x40:mode=crop:format=png/path/s720532a5ff7f8ce4/image/i76293b44f7a48dae/version/1495961385/image.png") no-repeat scroll right top transparent; background-color: #eee ; background-position: 2px 0px; padding-left: 40px !important;}

/*@media all and (min-device-width: 1280px) {*/
@media screen and (max-width: 1280px) {
    .j-module n j-htmlCode  {display:none;}
    #cc-m-6780025062 {display:none !important;}
}


Bonne journée,

Julie · Answer

Salut, 

...Oooops je ne sais pas ce qu'il foutait là ! Merci énormément c'était bien ça qui faisait tout foirer :o

Haha j'ai limite honte que c'était si simple à régler ! 

Merci bien 

Bonne journée ;)
Julie

CSS + Media Queries

2 réponses

Discussions similaires