0

I would like to ignore one CSS from my website on smartphone.

Here is my CSS that I would like to ignore :

a[href="http://localhost/wordpress/ireland/"], a[href="http://localhost/wordpress/france/"], a[href="http://localhost/wordpress/spain/"], a[href="http://localhost/wordpress/portugal/"], a[href="http://localhost/wordpress/canary-islands/"], a[href="http://localhost/wordpress/africa/"], a[href="http://localhost/wordpress/central-america/"], a[href="http://localhost/wordpress/indonesia/"], a[href="http://localhost/wordpress/carribean/"]{
   pointer-events: none;
   cursor: default;
}

Maybe I have to use this :

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}

I don't really understand, thank you for your help !

EDIT :

@media (min-width: 600px){
    a[href="http://localhost/wordpress/ireland/"], a[href="http://localhost/wordpress/france/"], a[href="http://localhost/wordpress/spain/"], a[href="http://localhost/wordpress/portugal/"], a[href="http://localhost/wordpress/canary-islands/"], a[href="http://localhost/wordpress/africa/"], a[href="http://localhost/wordpress/central-america/"], a[href="http://localhost/wordpress/indonesia/"], a[href="http://localhost/wordpress/carribean/"]{
       pointer-events: auto;
       cursor: default;
        }
    }
Vjardel
  • 1,065
  • 1
  • 13
  • 28

1 Answers1

0

You nearly have it.

You just need to wrap the css in a media query.

Not sure what width you need to limit to but I think most smartphones are less than 600px so the following should work for you.

@media (min-width: 600px){
    a[href="http://localhost/wordpress/ireland/"], a[href="http://localhost/wordpress/france/"], a[href="http://localhost/wordpress/spain/"], a[href="http://localhost/wordpress/portugal/"], a[href="http://localhost/wordpress/canary-islands/"], a[href="http://localhost/wordpress/africa/"], a[href="http://localhost/wordpress/central-america/"], a[href="http://localhost/wordpress/indonesia/"], a[href="http://localhost/wordpress/carribean/"]{
       pointer-events: none;
       cursor: default;
    }
}
Razzildinho
  • 2,564
  • 1
  • 19
  • 32
  • It doesn't work, I'm using iPhone 5 in portrait. My code is : edited. Even if I try with article{background-color:red} – Vjardel Mar 17 '15 at 12:55
  • I think there are some media queries for portraits and landscapes. Not used to them, but I remember that there were some – Zander Mar 17 '15 at 13:00
  • @Cheshire Maybe it's because I use Wordpress for my website ? I don't know, the CSS don't apply with media queries that you are saying to me :/ – Vjardel Mar 17 '15 at 13:02
  • Wordpress... I really don't like that kind of pages... I just can't. Make sure that in the headers is the meta for viewport and all that. – Zander Mar 17 '15 at 13:06