CCNA, CCNP, MCSA, CCNA Final Exam, All Answer Test Module With 100/100

I am trying to create specific CSS for handheld devices, and I feel like I've tried every way possible with no effect. The reason I need to do this is so that handheld devices to not use fancybox but instead open the link in a new tab. To do this in the div there are 2 UL's, each with a class (screen & handheld). I want the handheld ul to be hidden on desktops and the screen ul to be hidden on handhelds which should be working using display: none on each. To get the device specific CSS to work I've tried using seperate css files in the HTML header such as: <link rel="stylesheet" type="text/css" media="screen" href="css/master.css" /> <link rel="stylesheet" type="text/css" media="handheld" href="css/handheld.css" /> or, within the master.css file: @media only screen and (max-device-width: 640px) { .screen { display: none !important; } } but this does not work