Search code examples
cssresponsive-designmedia-queries

mobile responsive not working when rotated landscape

So our website is in its last stages before we make it live, however we have just noticed when we were checking mobile responsive everything was working fine, until we rotated the mobile to landscape view and it displayed the same styles as on a desktop and the responsive media wearies weren't working! our responsive code is as follows:

@media screen and (max-width:600px){
.stats{
    display:none;
}
}

can anyone help please?

Solution

  • add 

    <meta name="viewport" content="width=device-width, initial-scale=1">

    between head tags so you can get correct width from mobile devices (https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag) and change your media query as

    @media screen and (max-width:767px){
  .stats{
    display:none;
  }
}

    for mobile devices (phones)