Divi Media Queries

Media queries

Media queries can be used to tell your browser what to do at certain screen sizes or resolutions. For example;

It is media queries that decide when the top navigation stops and the mobile menu begins.

On screens 981px or larger…

 

On screens 980px or smaller…

How it works

A media query is made up of a media type and at least one limitation on the scope of the style sheet. In English, that simply means combining ‘@media’ with something that makes the CSS inside it, more specific.

Let’s look at an example –

@media ( min-width: 981px ) {

#main-header {

Background: #303030;

}

}

In this example, we have used a media query that targets all devices, but only if the window is at least 981px wide.

What if we wanted to target window sizes of at least 981px wide but not larger than 1100px? We would adjust the query like so…

@media ( min-width: 981px ) and ( max-width: 1100px ) {

 

You’ll sometimes see media queries for Divi expressed like this:

@media only screen and ( min-width: 1100px ) and ( max-width: 1405px) {

This works much the same as our first example with two exceptions:

A media type has been selected (screen).

It targets (only) that media type.

Generally speaking you don’t need either of these additions. ‘screen’ stops styles for other media types (handheld, tv) being loaded and ‘only’ was a necessary specificity before CSS3, but not now.

That’s not to say it’s a bad idea to use the ‘only screen’ version of the selector. As we know, with CSS, specificity wins, so simply having those words will be enough to override conflicting CSS without those words.

Media queries are a great way of stopping your changes having a wider reach than you meant them to. Say you make some changes on desktop and don’t want them to mess up the layout of your site on mobile, you could limit the changes to devices that are larger than 980px (the point where divi changes to the mobile menu) by placing your CSS inside a query like so:

@media ( min-width: 981px ) {

/** Your CSS goes here **/

}

I often use media queries on navigation items so my changes to desktop versions don’t mess up the design on mobile.

Using Media Queries in harmony with Divi breakpoints

Divi already uses media queries to change the way a large number of elements are displayed at different viewports. Where possible you should try and match your own media queries to those breakpoints, as this will help them merge seamlessly with movements already happening within the theme. If you have to use different breakpoints, it’s okay to do so, but remember that lots of different breakpoints gets messy.

Here are the breakpoints used in Divi that you should try and stick to. For reference, you can also find this list in your course resources.

/* Large Monitors*/

@media ( min-width: 1405px ) {

/* your CSS goes here */

}

 

/* Standard laptops & desktops */

@media ( min-width: 1100px ) and ( max-width: 1404px) {

/* your css goes here */

}

 

/* landscape Tablets */

@media ( min-width: 981px ) and ( max-width: 1099px ) {

/* your css goes here */

}

 

/* Portrait Tablets*/

@media ( min-width: 768px ) and ( max-width: 980px ) {

/* your css goes here */

}

 

/* Landscape Phones */

@media ( min-width: 480px ) and ( max-width: 767px ) {

/* your css goes here */

}

 

/* Portrait Phones */

@media ( max-width: 479px ) {

/* your css goes here */

}

Stephen James

SJ is a web developer living in the coastal town of Southsea, England. He is a Divi and WordPress advocate and the founder of Divi Space.

Previous post
Next post

5 Comments

  1. Michael

    Why do some limits overlap (large monitors-desktops and desktops-landscape tablets) and others do not (landscape tablets-portrait tablets, portrait tablets-landscape phones, etc?

    Is this a problem or am I being too anal?

    Reply
    • Stephen

      They shouldn’t, that was my error, thank you for noticing 🙂 I’ve fixed it now.

  2. rick

    This was very well explained. Would love to see more of the ” In English, that simply means…” explanations. Thank you!

    Reply
  3. Alicia

    So, responsiveness is something that still eludes me more often than not, especially with apple products. Say, for example, you remove or alter the padding of a section. Do you then need to apply a media query for every possible screen size to that same CSS to keep it responsive?

    Reply
  4. Faith

    Hi there,
    I wanted to take your CSS for Divi course but it says it out of stock? Have you withdrawn the course? Anything similar planned for the future?
    ps would love to know the answer to Alicia’s question above…

    Reply

Submit a Comment

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


Receive notifications about our new blog posts.


Don’t leave before entering to win an iPad Pro! It’s Free!

You may be too early for our Black Friday specials, but you can still enter our competition! Leave your details below and you could win an iPad Pro!

Great you've entered our giveaway! Only one step remaining! Please check your email and confirm it.