CODEWITHSUNDEEP
cssresponsive-designmedia-queries
James Clapson
James Clapson

Reputation: 39

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?

Upvotes: 0

Views: 1879

Answers (3)

akroid
akroid

Reputation: 1

Simply add orientation brother.

@media (orientation: landscape) {
  /* Your landscape-specific styles here */
}

Upvotes: 0

Aykut Ateş
Aykut Ateş

Reputation: 184

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)

Upvotes: 0

Jay
Jay

Reputation: 792

A landscape device ratio is bigger than 600px. If you use chrome, dev tools, when re sizing the viewport it shows you exactly the amount of pixels which is visible.

Off the top off my head, i would say you need to change your media query to;

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

Upvotes: 3

Related Questions