Issue with W3C CSS Validator and CSS transitions on Android Browsers

Hi Guys,

I have created this site www.gracekeegan.com and I'm having some issues with the last bits of testing.

I have come up to two things that need attention and I was hoping there might be some helpful advice out there...

Firstly, I have taken my HTML and validated/de-bugged it with the W3C HTML validator however when I place the CSS from the style.css file into their CSS validator I am coming back with some odd errors.

• They are all centred around the media queries I have for the different screens I am using. For the site it was requested that there be 4 panels that slide in/out on command from the top of the browser so to make everything sit well on retina browsers etc I had to add in some retina media queries.

Each media query is the same as this but with slightly different rules obviously and the breakpoints change each time. Have a look at the css on the site if you like.

The issue seems to be with the query itself, for some reason the checked css does not like me using the -device-pixel-ratio and all of its vendor prefixes like this ->

@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 320px), only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 320px), only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 320px), only screen and ( min-device-pixel-ratio: 2) and (min-width: 320px), only screen and ( min-resolution: 192dpi) and (min-width: 320px), only screen and ( min-resolution: 2dppx) and (min-width: 320px) {

rules in here

}

any thoughts?

Also on a separate note. During testing on a Samsung S2 running the android stock browser. The 'About' panel transitions in fine but for some reason none of the other panels do? I'm a bit confused as to why as they are all transitioning under the same CSS rule so if one works, they all should, right?

Really appreciate any comments/critiques have a hunt round the site and tell me what you think!

Thanks,

Dara