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.

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:

• YellowPencil: https://isotropic.co/yellowpencil-and-elementor-redundant-or-genius/
• CSSHero: https://isotropic.co/csshero-and-elementor-powerful-custom-css/
• Custom Breakpoint Plugins For Elementor: https://isotropic.co/how-to-add-custom-breakpoints-to-elementor/

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.

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.