CODEWITHSUNDEEP
cssmedia-queries
soccer7
soccer7

Reputation: 4005

CSS - Media Query for Different Orientation

I am trying to write Media Query

Like 

@media only screen 
and (min-device-width : 980px) and (max-device-width : 1024px) and (orientation : landscape) {
.login-details .offset2 li.first a {
            margin: 6% 19% 0;
    }

}

Which is working fine

Now problem is occuring

When i use firefox using crtl + shift + M

with ****980*1280 with landscape orientation****

it is working fine Now when i checked on simple view. CSS is still picking. I want that media will pick only for landscape.

Upvotes: 0

Views: 168

Answers (1)

user3500603
user3500603

Reputation: 53

@media (orientation : landscape) is true for normal desktop monitors(1024 x 768, 1440x800 etc).

The styles you apply in this block will be applicable for desktops but will not apply to devices while in portrait mode.

For eg. 

@media (orientation : landscape) {
  body {
    background-color:red;
  }
}

This will apply to all screens in landscape(including desktop monitors)

@media (orientation : portrait) {
    body {
        background-color:blue;
    }
}

This will apply to all screens in portrait mode only(cellphones, tablets in portrait mode)

Upvotes: 1

Related Questions