Media query is not working for 768px ipad portrait

Question

My media query is not working for 768px ipad portrait.

If I change for min-width works perfect but affects the size when is on desktop version or some another resolution more than 769px

@media only screen and (max-width: 768px) {
  .sidebar-container.pressed .content-container {
    width: 93% !important;
  }
}

Someone can explain me that, and help how to solve? I just want make it work on 768px.

Thanks

Answer 1

For iPads in portrait mode it is generally best to be more specific in the media queries, so try something like this:

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { 
    /* Styles Here */
}

This way you target devices with screen width between 768px and 1024px which is what the iPad is, then you filter your targets by specifying the orientation as portrait.

You could try something like this - reducing the max-width - to minimize any other screens that it could effect, but I haven't tried it so can't verify it works.

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 770px) 
and (orientation : portrait) { 
    /* Styles Here */
}