How to use CSS Media Queries in Elementor (for custom breakpoints)

Elementor is designed to be a responsive page builder (meaning layouts look good on all screen sizes). And while Elementor does include 3 responsive ‘break-points’, you may still run into issues on complex layouts or posts with a sidebar (narrower content area).

But don’t worry, you can solve most of these issues with a special CSS feature, called CSS Media Queries.

Pro-Tip: You can also target CSS rules by exact Elementor Breakpoints (no media query required)

You should know: Google’s mobile-first indexing means that responsive design and media queries are more important than ever.

What is a media query?

A media query is a feature of CSS that allows you to target rules to specifics screen sizes. Media queries are an essential component of responsive web design.

So an html element might have different styles applied, depending on how wide (in pixels) the visitors screen or web browser is.

Examples uses:

  • Show or hide an element on smaller screens
  • Resize an element based on screen size (text, buttons, etc.)
  • Change an element from partial width to full-width (e.g. columns).

Syntax of a Media Query

Media queries can target many media types, but for Elementor layouts you’ll mostly be interested in Screen queries, which can target css rules based on things like: screen width, height, orientation, aspect ratio, or resolution.

The basic syntax of a Media Query is:

@media media-type and (media-feature: value) {

/* CSS rules to apply here */

}

So in this example below, our rule gives all H2 headings a font-size of 40px (but only if the screen is at least 500 pixels wide).

@media screen and (min-width: 500px) {
    
    h2 {
        font-size: 40px;
    }
}Code language: CSS (css)

Things to know:

  • you can use any value for the screen size. You could just as easily target devices wider than 1400 pixels in the above example.
  • You can use multiple media queries per element. This lets you define multiple break points, based on different screen sizes.
  • You can use unlimited queries and sizes: There is no upper limit to how many media queries you can use on a page or site. You could write rules for every screen size in 100 pixel increments if you wanted (but it’s not a good or efficient practice).

Why use Media Queries in Elementor?

Simple: use media queries to ensure your designs look good at every screen size.

Media queries can fix common issues like:

  • Column text is too narrow and squished on small screens
  • Text is too large or small for the screen size
  • An element becomes misaligned when resizing the screen
  • An element goes outside the content container boundary
  • Replace elements with touch-friendly versions on mobile devices
  • Fix padding or margin that looks awkward at different screen sizes

What about built-in break points?

Yes, Elementor lets you style each element for 3 different screens sizes (Desktop, Tablet and Mobile) but not every smartphone has the same resolution. Sometimes designs don’t flow smoothly between these break points. Media Queries can fill the gap.

Can you add custom break points to Elementor?

Not really, at least not officially. This has been a highly-requested feature, but I doubt it will ever be added to Elementor. It’s something only about 5% of users want, and it will complicate life for the other 95%.

There are a couple plugins that attempt to add this functionality, but none are free and I can’t confidently recommend any of them.

How to use a Media Query in Elementor

In this section we’ll look at:

  1. Where to write your CSS media queries
  2. Some Elementor-specific examples
  3. How to right a CSS rule targeting Elementor break points

Where to write your Media Query CSS?

There are lots of different options for where to write your CSS code.

Examples include:

  • Elementor page custom CSS (Elementor pro)
  • Elementor global custom CSS (Elementor pro)
  • Embed in-page with HTML widget
  • WordPress customizer additional CSS
  • 3rd-party CSS plugin (Simple CSS, Custom CSS Pro, CSS Hero)
  • CSS stylesheet (advanced users)

Global vs. Page-specific CSS

The first choice is whether to put your CSS in a file that will be loaded on every page of your site, or just this single page. Naturally it depends on whether you intend to reuse your media queries for Elementor layouts.

Global CSS: if you want to reuse media query on other pages

  • WordPress Customizer
  • Elementor global custom CSS file
  • 3rd-party CSS plugins

Page-specific CSS:

There are two methods to embed your media queries in a single page (and avoid adding bulk to your site-wide CSS files.

  1. Use Elementor’s custom CSS feature
  2. Use the HTML Element to embed custom CSS

Custom CSS Plugins

All recent versions of WordPress let you add custom CSS using the ‘Additional CSS’ section of the Customizer. But that’s tied to your active theme, so you may want to use a plugin instead.

Free plugins for custom CSS:

How to put a Media Query in HTML Widget

You don’t need the Pro version to embed CSS in your Elementor layout. You can use the HTML Widget instead (available in the free version).

Here’s the template:

<style>

    /* your Media Queries Here */

</style>Code language: HTML, XML (xml)

That’s all you have to do. Sandwich your CSS code as normal in between html <style> tags.

Elementor Media Query Examples:

Here are some examples, showing common ways you might use a Media Query to adjust your layout across multiple screen sizes.

Examples:

  1. Hide an image on smaller screens
  2. Prevent squished columns on small screens
  3. Resize text based on screen size

Tip: Add a custom class name to your Elementor widget, making it easier to target the right element with your Media Query. I’ll be adding using the .yourclass class name in these examples.

1. Hide an image or widget on small screen sizes

@media screen and (max-width: 600px) {
    
    /* hide widget if screen 600px or smaller */
    
    .elementor-element.yourclass {
        display: none;
    }
}Code language: CSS (css)

2. Full-width columns on small screen

We need to target both the flexbox properties of the Elementor Row, as well as the width of the columns. You’ll want to add your classname to the Elementor inner-section containing the columns.

@media screen and (max-width: 700px) {
    
    /* Full-width columns if screen 700px or less */
    
    .elementor-section.yourclass .elementor-row {
        flex-wrap: wrap;
    }

    .elementor-section.yourclass .elementor-column {
         width: 100%;
    }
}Code language: CSS (css)

3. Responsive font-size

It’s possible to set your font-size relative to the width of the viewers browser, scaling it in 1 pixel increments without having to set individual breakpoints.

But we still want to use a media query to effectively set min/max values for the font sizing.

In this example: This was adapted from Chris Coyier’s demo at CSS Tricks.

This will scale your body font on any Elementor page ranging from 16px to 20px depending on the width of the visitor’s browser.

/* Scales default font size from 16px to 20px */

body .elementor {
  font-size: 16px;
}
@media screen and (min-width: 400px) {
  body .elementor {
    font-size: calc(16px + 4 * ((100vw - 400px) / 600));
  }
}
@media screen and (min-width: 1000px) {
  body .elementor {
    font-size: 20px;
  }
} Code language: CSS (css)

Targeting CSS Rules By Device Type

It’s also possible to target CSS rules to specific device sizes without using media queries at all. This is made possible by a data-attribute that Elementor adds to the <body> tag of your pages.

For example, here’s how it looks on my site:

Best of all, it’s updated via JavaScript if the viewport is resized. So styles will update even if the browser window resizes after the page load (like rotating a phone to landscape view).

And in many ways, this is easier and better than using media queries.

Here’s how to write a rule: Just write your CSS rule as normal, then add the data-attribute selector in front. Like this:

/* substitute the whichever device type you want to target (Mobile, Tablet, Desktop) */

body[data-elementor-device-mode="mobile"] .class-one .class-two {
    /*css rules go here */
}Code language: CSS (css)

Summary & Additional Resources

Let me summarize the key takeaways from this article:

  1. Mobile usability and responsive design are more important than ever
  2. Elementor has 3 custom break-points but that isn’t always enough
  3. You can use CSS media queries to bridge the gap between breakpoints
  4. Embed your CSS in Elementor directly, in the HTML widget or a CSS plugin

Learn more:

Here some great resources to learn more about media queries:

Share & Discuss!

How are you using media queries on your site? Do you have any tips to share or questions about this guide? Let us know in the comments.

Leave a Comment