Mobile Orientation Change Not Applying CSS

Mobile orientation change not applying CSS

My problem is related to the order of my CSS requests.

I used to define 'min-device-width' before the rest.

@media
only screen and (min-device-width: 240px) and (max-device-width: 520px),
only screen and (min-width: 240px) and (max-width: 520px) { ... } 

But if I define it last, it works.

@media
   only screen and (min-width: 240px) and (max-width: 520px),
   only screen and (min-device-width: 240px) and (max-device-width: 520px) { ... }

For more information about device-width:- check out this question

Change CSS Based on Mobile Orientation

The below JQuery code seems to work best for me...the binding examples did not.

$(document).ready(function() {
               $(window).resize(function() {
                  alert(window.orientation);
                  });
               });

Related Topics