<h1 id="heading-what-is-a-media-query">What is a Media Query?</h1>
<p>Using CSS media queries, we can make our web more responsive. When we open a website on different devices, the layout should be different. Using media queries, we can solve these issues and make the web responsive.</p>
<pre><code>@media screen and (min-width: <span class="hljs-number">600</span>px) {
  .element {
    <span class="hljs-attr">display</span>:flex;
    flex-direction:column;
    justify-content:center;
  }
}
</code></pre><p>Use these properties whenever the minimum width of a web page is 600 pixels.</p>
<h2 id="heading-value-ranges">value ranges</h2>
<pre><code>@media (min-width: <span class="hljs-number">600</span>px) and (max-width: <span class="hljs-number">1100</span>px) {
  .container {
    background-color: purple;
  }
}
</code></pre><p>The container class should apply these properties whenever our web page is between 600px and 1100px wide.</p>


# What is a Media Query?

Using CSS media queries, we can make our web more responsive. When we open a website on different devices, the layout should be different. Using media queries, we can solve these issues and make the web responsive.


```
@media screen and (min-width: 600px) {
  .element {
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
}
``` 

Use these properties whenever the minimum width of a web page is 600 pixels.



## value ranges


```
@media (min-width: 600px) and (max-width: 1100px) {
  .container {
    background-color: purple;
  }
}
``` 

The container class should apply these properties whenever our web page is between 600px and 1100px wide.





Using CSS media queries, we can make our web more responsive. When we open a website on different devices, the layout should be different. Using media queri

CSS Media Queries

Table of contents

What is a Media Query?

value ranges