Target two screen sizes on Chrome only

Question

I'm using @media queries to make only Chrome browsers to position the ".l-triangle" in a specific position. So I'm using the following method

@media screen and (-webkit-min-device-pixel-ratio:0) { 
/* Fix for Chrome / Safari Users ONLY */

.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 for Chrome browsers with screen size bigger than 968px but not on smaller than 968px.

My questions is how can I pass 2 different css values for Chrome browsers only with 2 different screen sizes?

Perhaps looking at the five `responsive-*.less` files for [Twitter Bootstrap](https://github.com/twitter/bootstrap) would give you some pointers. Although it's in LESS, the `@media` queries are still standard CSS. — MTCoster, Feb 23 '13 at 20:29

score 0 · Answer 1 · edited May 23 '17 at 10:32

0

I think you have the same issue here.

This code work only on Chrome :

.chrome #thingie {
   do: this;
}

I hope that will help you.

edited May 23 '17 at 10:32

Community

1
1

answered Mar 06 '13 at 08:58

Francois Borgies

2,378
31
38

score 0 · Answer 2 · answered Dec 09 '14 at 09:25

0

You can use operators like "and" or "not" in your media queries.

@media screen and (-webkit-min-device-pixel-ratio:0) and (min-width: 968px) {
...code here...
}

answered Dec 09 '14 at 09:25

Octav

122
9

Target two screen sizes on Chrome only

2 Answers2