1

I have added some piece of CSS code to my webpage, I want this CSS code should work only for chrome. On IE its already in correct position.

@media only screen and (min-width:1280px) { 

    #x07ad3a0adb92619cc table tbody tr td img {
      max-width: 185% !important;
    }
    #xcfad3a0ad9619c9 table tbody tr td img {
       max-width: 155% !important; 
    }
    #x0fa3a0adb9219cf table tbody tr td img {
       max-width: 165% !important; 
    }
}

I have tried the following media to apply CSS only for chrome

@media and (-webkit-min-device-pixel-ratio:0){
@media only screen and (min-width:1280px) { 

    #x07ad3a0adb92619cc table tbody tr td img {
      max-width: 185% !important;
    }
    #xcfad3a0ad9619c9 table tbody tr td img {
       max-width: 155% !important; 
    }
    #x0fa3a0adb9219cf table tbody tr td img {
       max-width: 165% !important; 
    }
}
}

But the original position of webpage images got collapsed. The above code is not working on chrome. Also, this part of code appears in red color. min-device-pixel-ratio:

enter image description here

I don't understand what's wrong with my code:-(

Can anyone help me?

Thanks in advance!!

bugfreerammohan
  • 1,471
  • 1
  • 7
  • 22
krish
  • 1,077
  • 6
  • 24
  • 49
  • Often you will be better off asking yourself *why* there is a difference between browsers and what you can do differently to achieve more consistency between them. Targeting specific browsers is rarely the right answer these days, in my opinion. – misterManSam Jan 11 '19 at 08:08
  • @misterManSam @johey @Rahul got solution by editing my code like this `@media screen and (-webkit-min-device-pixel-ratio:0) and (min-width:1280px) { }` – krish Jan 11 '19 at 09:02

2 Answers2

1

The line @media and (-webkit-min-device-pixel-ratio:0){ has an incorrect syntax: you have to remove the and because there's only one condition.

Hopefully this small thing resolves your problem.

Best regards, Johan

johey
  • 1,139
  • 1
  • 9
  • 25
0

You should try this code

/* Chrome 29+ */
@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {
    // your code here
}

reference https://jeffclayton.wordpress.com/2015/08/10/1279/

Rahul
  • 4,294
  • 1
  • 10
  • 12