I have 2 mediaquery.

@media screen and (max-device-width: 1199px) {
  #content-id {  
      height: 480px !important;
      background: rgb(16, 25, 100);
      width: 99%;
      border-radius: 5px;
      margin-top: 0px;
      max-height: 30%;
    }
}

2:

@media screen  and (min-device-width: 1200px) {
  #content-id {   
    height: 580px !important;
    background: rgb(124, 57, 57);
    width: 99%;
    max-height: 30%;
  }
} 

As you can see the backgorund and height are difrent. They have to change when the page size is changed.

I use Chrome. When i smalled the page manually with mouse, it doesn't work. Browser's zoom is 100%. But i press right click and do inspect. After when i set devices (ipad or responsive etc.), it's work. If i did that, zoom is smaller than 100% automaticly.

So, I think page's zoom cause this problem. But I couln't fix that. Could you help me?

CodePudding user response：

Try changing your media queries to something more simpler by removing 'screen' and changing 'max-device-width' to 'max-width' and 'min-device-width' to 'min-width'

@media (max-width: 1199px) {
  #content-id {  
      height: 480px !important;
      background: rgb(16, 25, 100);
      width: 99%;
      border-radius: 5px;
      margin-top: 0px;
      max-height: 30%;
    }
}

@media (min-width: 1200px) {
  #content-id {   
    height: 580px !important;
    background: rgb(124, 57, 57);
    width: 99%;
    max-height: 30%;
  }
} 

CodePudding user response：

max-device-width and min-device-width are deprecated in media queries 4, you are testing against your device width which is fixed ,so one of the styles will never be applied. try using max-width instead and for the normal screen no need for media queries

@media (max-width: 1199px) {
  #content-id {  
      height: 480px !important;
      background: rgb(16, 25, 100);
      width: 99%;
      border-radius: 5px;
      margin-top: 0px;
      max-height: 30%;
    }
}


  #content-id {   
    height: 580px !important;
    background: rgb(124, 57, 57);
    width: 99%;
    max-height: 30%;
  }

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

you can check more about media queries in : https://learnjsx.com/category/1/posts/mediaQueries