How to set up media queries for Ipads and Tablets for portrait and landscape orientations in CSS

Question

When I use this code(see below) the media query does not work

@media (min-width: 768px) and (orientation : portrait) { //scss code }

But when I remove the 'and (orientation : portrait)' part it works. i.e

//this code works
@media (min-width: 768px) { //scss code }

How can I set up media queries for Ipads and Tablets for portrait and landscape orientations in CSS?

PS: I am coding a responsive layout for the web and I am using scss mixins (don't know if that affects anything.)

it is a duplicate https://stackoverflow.com/questions/26861189/how-to-set-portrait-and-landscape-media-queries-in-css — Arindam Sarkar, May 18 '19 at 10:29
Possible duplicate of [How to set portrait and landscape media queries in css?](https://stackoverflow.com/questions/26861189/how-to-set-portrait-and-landscape-media-queries-in-css) — maazadeeb, May 18 '19 at 10:54

score 0 · Answer 1 · answered May 18 '19 at 12:37

0

try this code

    @media screen and (min-width: 768px) and (max-width: 992px) { 
    /* STYLES HERE */
    }

answered May 18 '19 at 12:37

Ritesh pandey

2

It would be better to provide an explanation along with your code. – L. F. May 18 '19 at 13:09

1 Answers1