Understanding Media Queries.

Media queries, a phrase that scares the hell out of some developers.

When in actuality there are pretty easy to understand. In my designs I tend to use at least 2 sets of media queries in every site I  design. The media queries job is to tell the browser what to do based on the screen size.

A media query consists of a media type and at least one expression that limits the style sheets’ scope by using media features, such as width, height, and color.  For example this media query tells the browser to make the h1 color red if the screen size is greater than 900px.

/*desktop styles here*/
@media (min-width: 900px) {
  h1 {

Media queries use 2 conditional statements to work their magic and they are min-width and max-width. With these two statements included in the media query make it is possible to have a totally different homepage based on the size of the device. So here is a brief explanation of what a media query is telling the browser.

[css]@media (min-width: 768px)  {...}[/css]

Here’s what that actually means:

“If [device width] is greater than or equal to [specified #], then do {…}”

So if the actual “device width” is less than 768px  this condition will return false and all the styles you have under this media query will not display on screen smaller than 768px so in other words mobile devices.

[css]@media (max-width: 767px)  {...}[/css]

“If [device width] is less than or equal to [specified #], then do {…}”

Under this media query is where I tweak the mobile experience. I check for padding issues, fonts that seem to big for mobile or anything else that looks like it doesn’t belong.

For those who want to get  a much deeper understanding of media queries hope over to Mozillas website

Related Articles

How To Turn A Section Into A Carousel

Greeting All, In this tutorial I am going to show you how you can turn...

How to Make A Horizontal Scrollable Mobile Menu

Greetings Everyone, This short tutorial will shed some light on how to replicate the mobile...

How To Wrap Text In Elementor

Greetings All. This brief tutorial will touch on a subject I was asked about this...

How to Create A CSS Arrow

Greetings All, For this brief tutorial I will show you how to create a css...

Leave a Reply

Your email address will not be published. Required fields are marked *

Powered by Elementor Pro

How happy are you with Key Elements?


Subscribe to get notified and receive a special invite.