CODEWITHSUNDEEP
csstwitter-bootstrapmedia-queriesstylesheet
Neelam Khan
Neelam Khan

Reputation: 1121

How do I target landscape and portrait orientation for mobile devices

I am using bootstrap to build a client's site and I have come unstuck when trying to target landscape and portrait orientation on mobile in order to add some specific styles for both viewports. How do I target portrait and landscape orientation for mobile styles? I need to add specific styles at 320px breakpoint and certain styles at 480px breakpoint. With my current media queries this is not working Currently in my stylesheet I have the following:

/* portrait phones */
@media only screen and (max-width: 320px) and (orientation:portrait) {
    /* Styles */
}

/* landscape phones */
@media only screen and (min-width: 321px) and (orientation:landscape) {
/* Styles */
    }

If I put styles in for landscape however I don't think they are being picked up. Every time I make a change and then refresh my Iphone I don't see any difference. Im thinking maybe my media queries are wrong? If there is a better way to target mobile states I would greatly appreciate any help.

Upvotes: 1

Views: 10002

Answers (2)

user11101457
user11101457

Reputation: 29

Try to use:

@media (orientation: portrait) and (max-width: 400px) {Fooobar}

@media (orientation: landscape) and (max-width: 400px) {foobar}

Upvotes: 2

Neelam Khan
Neelam Khan

Reputation: 1121

I managed to resolve this issue in the end by adding a max-width to my 321px media query and was able to target both landscape and portrait mobile orientation. I also found in my header I had: initial-scale=1 which seemed to be causing the problem and after removing it I was able to target the mobile breakpoints I needed. 

/*Portrait phones */
@media (max-width:320px){}

/* Landscape phones and down */
@media (min-width: 321px) and (max-width: 480px) {}

Upvotes: 1

Related Questions