Niq's OA Resources

CSS Media Query

CSS media Queries

W3 Schools page on media query

This is a more advance CSS rule that you can use to have CSS apply under certain conditions, like at certain screen size, or if something is being printed.

Resize your screen screen to watch the "Hello" change

Hello
<div class="thisisaclass" style="padding: 35px; text-align: center;"> Hello </div> <style> .thisisaclass{ font-size: 5rem; background-color: #0cc; } @media screen and (max-width: 999px) { .thisisaclass{ font-size: 3rem; background-color: #066; font-weight: bold; } } </style>

The thing to keep in mind is the cascading part of CSS. If you have styling set up like the example above, and the media query after, it will override the previous CSS.

You can combine selectors (with 'and')

Hello
<div class="potato"> Hello </div> <style> .potato{ font-size: 4rem; } @media (min-width: 700px) and (max-width: 999px) { .potato{ font-size: 1rem; } } </style>