Understanding CSS Media Queries

Media queries are used to include a block of CSS properties only if a certain condition is true.
when you want to modify your site depending on a device's general or specific characteristics and parameters, the CSS media query is what you need.
In this guide, we would explain media queries like you are 5!
Let's get started.

You can think of media queries as a condition. If true, we do something, else we do something else.

Syntax

A media query is composed of an optional media type and any number of media feature expressions.

What is a media type?
This defines the broad category of a device for which the media query applies: all, print, screen.

What is a media Feature?
Media features describe a specific characteristic of the user agent, output device, or environment eg height, prefers-color-scheme, width, etc.

Targeting media types

Media types describe the general category of a given device. it can be targeted as seen below

media screen {
//do something
}

screen in the above code is the media type.

Targeting media features

@media (max-width: 12450px) {
 //do something
 }

max-width in the above code is the media feature.

Sometimes you may want to create a media query that depends on multiple conditions. This is where the logical operators not, and, & only come in.

@media (min-width: 30em) and (orientation: landscape) {
 //do something 
}

min-width and orientation in the above code are the conditions that the media query depends on.

To get a better understanding, we would be replicating the below hero section for both mobile and desktop screen sizes.

Create an HTML file and name it whatever you want. I'm naming mine index.html
Create a CSS file and name it whatever you want. I'm naming mine style.css

//index.html 
<section>
<div class='first-div'>
<p>Meet Celtic</p>
<h1>A secret tool for the best analytic experience</h1>
<p>Track your goal and monitor your progress towards important goals/quotas</p>
<a href='#'>Get started</a>
<a href='#'>Request demo</a>
</div>

<div class='second-div'>
<img class='image' src='www.google.com/image/celtic' />
</div>
</section>

The above code has created the required elements for the hero section. We won't focus on styling the elements. Let's use CSS to develop the layout.

*,html {
margin : 0;
padding: 0;
box-sizing: border-box;
}

section{
display : flex;
flex-direction: row;
align-items : center;
justify-content: space-between
padding: 2rem;
}

.image{
max-width:100%;
width: 320px;
}

The above code is well optimized and will display correctly on the desktop. But on smaller screens, the layout starts looking disorganized.
The best option is to move the image to a different line entirely.

//Targeting screen sizes between 0 and 450px
@media (max-width:450px) {
section{
flex-direction: column;
justify-content: center;
}

.image{
max-width:100%;
width: 100%;
}
}

Changing flex-direction to a column when the screen size is 450px or below helps make our website responsive.
And the image takes 100% of its size when the screen size is 450px or below.
Yes, that's how easy it is!

Conclusion

Media query is a CSS technique that uses the @media rule to include a block of CSS properties only if a certain condition is true.