How To Use CSS Media Queries In Elementor

By James LePage
 on July 30, 2020
Last modified on January 7th, 2022

How To Use CSS Media Queries In Elementor

By James LePage
 on July 30, 2020
Last modified on January 7th, 2022

This article is going to take a look at how to use CSS media queries in Elementor to responsively apply styling.

It's meant to be an introductory guide to using this CSS rule with Elementor and Elementor Pro. We're not going to go into crazy depth about how to do every little thing when it comes to responsive styling using custom media queries in CSS, but this should provide a good foundation and arm with enough knowledge to ask the right questions (we encourage you to do that in our comments section!).

When using Elementor, you have 3 responsive screen versions that you can make use of: desktop, tablet, and mobile. Basically, if the screen size with shrinks be under 400ish PX, then the CSS styling specific to that screen width (created by the Elementor editor) is applied. If the screen size is under 700 pixels, then CSS styling specific to the tablet screen size is applied.

custom css media queries in elementor

This is all done behind the scenes, as Elementor is a completely visual builder. If you use the responsive editor tool, you're already using media queries, you may just not know it.

What’s A Media Query?

A media query Is a CSS rule that dictates that styling should be applied when a screen width is greater than, less than, or equal to the specified value. Here's a really quick example:

@media screen and (max-width: 900px) {
    #elementor-header {
        display: none;
}Code language: CSS (css)

This applies styling to screen sizes that are under 900 pixels wide (the most common Tablet screen size). Any screen size that is over 900 pixels (laptops and desktop screens) will not have this CSS styling applied.

As you can see, you can be incredibly specific with custom CSS styling for specific device types and screen sizes using media queries in Elementor. While Elementor comes with three default screen sizes, you can easily use a media query to set up more specific custom styling rules.

You can use max width to make the CSS apply to everything that is under the specified pixel width, min width to make the CSS apply to everything that is over the specified pixel width, or even set the CSS to apply to a set minimum and maximum width.

As an example, the following media query would only apply the underlying CSS styling to a screen that is between 1200px and 900px.

@media (max-width: 1200px) and (min-width: 900px) {YOUR CSS HERE}Code language: CSS (css)

If you're worried about the complexity of this method (it's not that bad, just a bit tedious), we recommend taking a look at these three other articles:

Why Use CSS Media Queries In Elementor

There are many different applications for custom CSS media queries in Elementor, but the most common use that we have for them is adjusting the structural fit of a page to any screen size.

Typically, we use this for column widths. For example, we can use the core responsive editor included with Elementor to set up the overall responsive structure of a page, but sometimes elements get too squished or two spaced out. This is especially true on iPad Pros, or when the website is viewed in the landscape orientation of a mobile device.

The new iPad Pro is unquestionably a computer
We need custom media queries (or breakpoints) to make this happen in Elementor.

Either content contained within the column gets to spaced out, or to compact. This can sometimes even trigger a mobile usability error from the Google search console.

To fix this, we identify the screen size that is causing the problem using the Firefox Dev Tools responsive screen viewer, and then write custom CSS media queries to either hide columns or resize them to better fit on the screen.

Here's an example of a user from the Elementor Facebook group who had the same issue:

She was experiencing the same issue that many other creators who use Elementor have encountered in the past. On most screen sizes, the layout looks fine, but on a specific pixel range, columns become too close together making them difficult to read and navigate on a touch screen.

In this case, the creator wanted to drop the columns down from three to two, giving the content within them more room, and eliminating a “squished look”.

However, there was no native element or breakpoint that worked well for this as it was between two pixel widths that were covered by the desktop responsive editor.

The fix for this situation was using a CSS media query that only applied to screen with between 1199 pixels and 1025 pixels.

The CSS made it so the columns would wrap to another row, allowing more space for content to be displayed on that specific screen size.

As you can see, this can be incredibly helpful if you have a basic understanding of CSS (or are willing to learn). Elementor outputs HTML code styled by CSS, just like any other website builder.

All you need to do is identify these section and column Classes or IDs, create the custom CSS media query for Elementor, and then write the code that applies to that specific screen size.

After writing the code, you can apply it to your element or website by placing it in the custom CSS input under advanced settings, creating a global stylesheet, or using a tool like CSSHero to manage all of your CSS in one place.

And just like that, you can conditionally apply styling based on the screen size of your visitors device in elementor without the need for any custom breakpoint plugins, or even a third party solution.

Subscribe & Share
If you liked this content, subscribe for our monthly roundup of WordPress news, website inspiration, exclusive deals and interesting articles.
Unsubscribe at any time. We do not spam and will never sell or share your email.
Notify of
Newest Most Voted
Inline Feedbacks
View all comments
Joe Fletcher
3 years ago

Thanks, this pointed me in the right direction. Here's a simplified version. Put this CSS in the Elementor Section where you want the columns to have a custom breakpoint. This one for example collapses my default number of columns, e.g., 5 down to 3 when the screen gets to be about a medium size.

@media ( min-width: 1025px ) and ( max-width: 1200px ) {
 selector .elementor-row { flex-wrap: wrap; }   
 selector .elementor-column { width: 33%; }
8 months ago
Reply to  Joe Fletcher

This solution gives me the following errors, see attachment. I guess code has to be changed afte this long time?

Joe Fletcher
8 months ago
Reply to  Peter

No, the code is correct. That CSS editor is not recognizing the @media query.

3 years ago

Thanks. I think I think I just discovered an implementation may be more suited for Elementor media queries:

body[data-elementor-device-mode=desktop] selector, body[data-elementor-device-mode=tablet] selector {
position: sticky; position: -webkit-sticky; top: 50px;

It maybe worth sharing with the community

3 years ago
Reply to  Antony


Dimitri Jovanovic
Dimitri Jovanovic
2 years ago

I've come to this post while searching for a solution to a problem that I have now. My custom media queries won't work when I add them in elementor (advanced -> custom CSS) .. here is the picture

John Fleming
John Fleming
1 year ago

Custom Breakpoints for Elementor is the only solution I've got.

It has bugs earlier which makes sense but it's stable now. Got helpful supports also.
I've deployed my 10+ websites.

Nirmala Alexander
Nirmala Alexander
2 months ago

mobile view is not appropriate in wordpress tabs elementor, could you share media queries for CSS

Article By
James LePage
James LePage is the founder of Isotropic, a WordPress education company and digital agency. He is also the founder of, a venture backed startup bringing AI to WordPress creators.
We're looking for new authors. Explore Isotropic Jobs.
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram