5/5

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.

[css]
/*desktop styles here*/
@media (min-width: 900px) {
  h1 {
    color:red;
  }
}
[/css]

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

By Aires Dagraca

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

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 a one column section in a carousel slider you can be proud of. Here is what you will be creating. Responsive and functional carousel. There…

How to Make A Horizontal Scrollable Mobile Menu

Greetings Everyone, This short tutorial will shed some light on how to replicate the mobile menu seen on Elementor website. See the image below to see what I am referring to. My working environment Theme: Hello Theme Elementor Version: Pro…

How To Wrap Text In Elementor

Greetings All. This brief tutorial will touch on a subject I was asked about this week concerning a simple way of wrapping text around an image. So after some experimenting and trying multiple methods this is the solution I found…

Leave a Reply

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

Become a Premium Member and get full access to exclusive courses and templates.

Key Elements provides a unique collection of tutorials, tips, & courses for Elementor Theme Builder. From advanced to basic tutorials we have something for everyone.
Share on facebook
Share on twitter
Share on linkedin
Account
  • Privacy Policy
  • Terms & Conditions
Pages
  • Articles
  • Resources
Important
  • About
  • Contact
Key Elements provides a unique collection of tutorials, tips, & courses for Elementor Theme Builder. From advanced to basic tutorials we have something for everyone.
Share on facebook
Share on twitter
Share on linkedin
Account
  • Privacy Policy
  • Terms & Conditions
Pages
  • Articles
  • Resources
Important
  • About
  • Contact
©2018 - 2020 Key Elements, All Rights Reserved
newsletter

Subscribe to get notified and receive a special invite.

Feedback
Powered by Elementor Pro

How happy are you with Key Elements?