Launched comma separated list of media query lists

Question

I am coding a site using AngularJS and SCSS. I am in the mobile development phase, and I quickly discovered (for this project) that I needed a way to configure multiple breakpoints using the @media query. Therefore, I found through this SO the answer and this post of CSS tricks , as well as several other answers to SO. Then I implemented the solutions that I found in the test script, see the snippet below for the test.

 main { background-color: grey; height: 100%; min-height: 1000px; @media (max-width: 992px) { background-color: red } @media (max-width: 768px) { background-color: lightcoral } @media (max-width: 992px), (max-width: 992px) and (orientation: landscape) { background-color: lightgreen; } @media (max-width: 768px), (max-width: 768px) and (orientation: landscape) { background-color: lightblue; // Reset the min-height here, because we no longer have the sticky search bar. min-height: 450px; } } 

 <main> <h1>Page Title</h1> <h2>Some Descriptive information</h2> <div>Content</div> </main> 

But I could not get it to work. What I'm trying to do ultimately has styles that apply when the user is in the landscape on a tablet or phone. However, I do not know if I am doing this correctly or using the or operator correctly.

It just doesn't work, well, the first statement (for example: (max-width: 992px) ) works, but the second does not evaluate true. According to Mozilla:

Lists separated by commas behave like a logical operator or when used in media queries. When using a comma separated list of media queries, if any of the media queries returns true, styles or style sheets are applied. Each media request in a comma-separated list is treated as an individual request, and any operator applied to one multimedia request does not affect the others. --- Mozilla Documentation

Even if I break the code into two separate media queries:

 @media (max-width: 992px) { background-color: lightgreen; } @media (max-width: 992px) and (orientation: landscape) { background-color: lightgreen; } 

It still does not work. So I don’t know if I am aiming at the wrong width (when in the landscape) or what I am doing wrong. Can other Front-End developers tell me why my comma related messages do not work?

EDIT: Here is the native SCSS code:

 main { background-color: $mono-90; height: 100%; min-height: 1000px; @media screen and (max-width: map_get($grid-breakpoints, 'md')) { // Reset the min-height here, because we no longer have the sticky search bar. min-height: 450px; } @media (max-width: map_get($grid-breakpoints, 'lg')), (max-width: map_get($grid-breakpoints, 'lg')) and (orientation: landscape){ background-color: lightgreen; } @media (max-width: map_get($grid-breakpoints, 'md')), (max-width: map_get($grid-breakpoints, 'md')) and (orientation: landscape){ background-color: lightblue; } @media (max-width: map_get($grid-breakpoints, 'sm')), (max-width: map_get($grid-breakpoints, 'sm')) and (orientation: landscape){ background-color: lightcoral; } } 

EDIT: Following @Godwin's recommendation, I simplified the following @media queries:

 main { background-color: $mono-90; height: 100%; min-height: 1000px; @media screen and (max-width: map_get($grid-breakpoints, 'md')) { // Reset the min-height here, because we no longer have the sticky search bar. min-height: 450px; } @media screen and (max-width: map_get($grid-breakpoints, 'lg')) { background-color: lightgreen; } @media screen and (max-width: map_get($grid-breakpoints, 'md')) { background-color: lightblue; } @media screen and (max-width: map_get($grid-breakpoints, 'sm')) { background-color: lightcoral; } } 

However, it does not work on the iPad Landscape (1024x768). I don’t want it to show on laptops, but I want it to show on iPad in landscape orientation.

Answer 1

However, it does not work on the iPad Landscape (1024x768). I don’t want it to show on laptops, but I want it to show on iPad in landscape orientation.

I'm not sure what you define with it , since you are not hiding anything in your examples, so I'm going to refer to:

What I'm trying to do ultimately has styles that apply when the user is in the landscape on a tablet or phone.

Focus on MDM is defined as:

This value does not match the actual orientation of the device.

It simply indicates whether the viewing area is in landscape orientation (the screen is wider than tall) or the portrait (higher display than widescreen).

You said that your iPad in the landscape has a resolution of 1024x768, so to orient your iPad or phone in landscape mode, you can set up a media query that targets all devices with a maximum width of 1024 pixels and is in landscape mode (the display is wider than tall):

 main { background-color: grey; height: 100%; min-height: 1000px; width: 100%; @media screen and (max-width: 1024px) and (orientation: landscape) { background-color: lightblue; } } 

You can check the example of this code .

If your viewport has a width greater than 1024px, the main element will be gray no matter what.

If you resize your browser window to have a window with a width equal to or less than 1024 pixels and have a viewport viewed in landscape orientation (the screen is wider than tall), for example iPad in landscape mode (1024x768), the multimedia request will call and apply blue background:

If you resize your browser window to have a viewport with equal to or less than 1024 pixels, but with a height exceeding your width, the viewport is no longer considered in landscape mode, but switches to portrait mode. At this time, the media query no longer starts, and we return to the gray element:

So, regarding your question, the example is a media query for applying styles to a user using a tablet or phone in landscape mode.

Answer 2

Here is the solution. Hope this works for you.

 main { background-color: grey; height: 100%; min-height: 1000px; } @media (max-width: 992px) and (orientation:portrait) { main{ background-color: red } } @media (max-width: 768px) and (orientation:portrait) { main{ background-color: lightcoral } } @media (max-width: 992px) and (orientation: landscape) { main{ background-color: lightgreen; } } @media (max-width: 768px) and (orientation: landscape) { main{ background-color: lightblue; min-height: 450px; } } 

 <main> <h1>Page Title</h1> <h2>Some Descriptive information</h2> <div>Content</div> </main>