css3 - Target two screen sizes on Chrome only -

css3 - Target two screen sizes on Chrome only -

i'm using @media queries create only chrome browsers position ".l-triangle" in specific position. i'm using next method

@media screen , (-webkit-min-device-pixel-ratio:0) { /* prepare chrome / safari users */ .l-triangle { background: transparent url('../images/menu_bg_left.gif') no-repeat; position: absolute; float: left; width: 55px; height:75px; display: block; left: 0px; top:0px; z-index: 0; -webkit-box-shadow: 0 8px 6px -6px rgba(0,0,0,0.7); -moz-box-shadow: 0 8px 6px -6px rgba(0,0,0,0.7); box-shadow: 0 8px 6px -6px rgba(0,0,0,0.7); }

it works ok chrome browsers screen size bigger 968px not on smaller 968px.

my questions how can pass 2 different css values chrome browsers only 2 different screen sizes?

i think have same issue here.

this code work on chrome :

.chrome #thingie { do: this; }

i hope help you.

google-chrome css3 media-queries