How To Responsively Hide Elements In Elementor

I had a situation in a website build recently where I wanted to show a high resolution slider on desktops and a lower resolution, static image on mobiles. I've done this before in Beaver Builder, but hadn't done it in the Elementor WordPress page builder.

We've got a guide on how to install Elementor if you need to check that out before moving on with these steps.

Here's how to responsively hide elements in Elementor:

  1. Select the element or row you want to hide
  2. Click the Advanced tab in the editor
  3. Click the Responsive dropdown to open it
  4. Choose whether to hide on Desktop, Tablet or Mobile.

If you need to responsively hide columns in Elementor, not just elements, I’ve got a full tutorial here.

This is what it looks like when you hide a text element for mobile

This functionality applies to both the free Elementor builder and Elementor Pro.

How would you use this?

Having these switches allows you to easily get a lot more granular in your designs without having to dig too deeply into the code.

The most common way I've used this functionality is responsively displaying images. This lets you use high resolution photos on desktops, where you have more space to work with, a larger screen size and typically a wider display. It then lets you use better scaled images on smaller screens, where space is at a premium, speed is prioritised and you really can't tell if an image is high resolution.

The other way I've used these responsive design toggles is on whole rows, where I want a radically different design and rearranging the columns doesn't cut it.

Responsively hiding elements should only be done as a last resort, when you can't adequately restructure the content. But if you must use it, it's a great feature to have.

To what sizes do the Responsive toggles in Elementor apply?

The way the Responsive toggles work in Elementor is they add one of the following CSS classes to the element or row that you hide:

  • elementor-hidden-desktop
  • elementor-hidden-tablet
  • elementor-hidden-phone

The styling for these classes is contained in frontend.css or frontend.min.css:

@media (min-width:1025px) {
	.elementor-hidden-desktop {
		display:none;
	}
}
@media (min-width:768px) and (max-width:1024px) {
	.elementor-hidden-tablet {
		display: none;
	}
}
@media (max-width:767px) {
	.elementor-hidden-phone {
		display: none;
	}
}

What are the Elementor responsive breakpoints?

  • Desktop is 1025 px and greater
  • Tablet is between 768px and 1024px
  • Mobile is 767px and smaller

So, whatever you hide on Desktop will be hidden if the browser is 1025 pixels wide or greater.

Whatever you hide on Tablet will be hidden if the browser is between 768 pixels and 1024 pixels wide.

Whatever you hide on Mobile will be hidden if the browser is 767 pixels wide or smaller.

How to hide at different breakpoints

Let's say you wanted to change the size at which you responsively hid an element. An example would be to use in conjunction with Bootstrap's responsive breakpoints. Bootstrap's xs column class applies to columns smaller than 576 pixels.

Assuming you want all your elements visible down to 576 pixels, then selectively hide them, you'd put the following code into your custom CSS:

@media (max-width:767px) {
	.elementor-hidden-phone {
		display: block;
	}
}
@media (max-width:576px) {
	.elementor-hidden-phone {
		display: none;
	}
}

The same principle would apply to any of the other breakpoints.

Remember that the default setting is for the element to be visible. In CSS terms, it is display: block; so to hide it, you just do display: none;.

How to change Elementor's Responsive Breakpoints

The way to change Elementor's responsive breakpoints is go to Elementor -> Settings -> Style tab. At the bottom of the page is "Tablet Breakpoint" and "Mobile Breakpoint". Change these values and click "Save Changes".

12 thoughts on “How To Responsively Hide Elements In Elementor”

    • This works by setting the element to display:none in the CSS. Basically the instructions for the element are still in the html of the page, but we're telling the browser not to draw it.

      Reply
    • Hi Mike,

      Thanks for your excellent article.

      You mention, one of the reasons why you hide desktop content on mobile is because it improves page loading. Are we talking about screen rendering speed, page loading speed or both here?

      So if for instance I duplicate a block of images and use one for desktop and one for mobile.. would it take twice as much for the page to load even if one of the blocks is hidden? or the same?

      Many thanks in advance

      Reply
    • It's just hiding it from the browser view. Those elements are still in the code. We're only doing it responsively, meaning those elements will be visible in at least one screen size. Unless you're using the function to show Google a different version from what your users will see, I can't see how Google might penalise your site for this.

      Reply
    • If it's leaving white space, have a look at the parent container. You may need to adjust the padding or margins on that for mobile. Responsive hidden mode just sets display:none; on the element you set it for, when the screen is in the mode you set it for.

      Reply
  1. re: "Remember that the default setting is for the element to be visible."

    I wonder if maybe instead of display: block you should say display: inherit, and then if you had inline elements that you had added a query for display: none, the "normal" display would just be whatever it should be, rather than forcing it to be display: block

    Reply
    • Elementor sets the default setting to display: block. You could override that if you needed to, but the default will always be block.

      The confusion probably comes because just before that I had a CSS code section with display: block. I was merely conforming to the rest of Elementor's conventions, given we were talking about changing the breakpoints. Unless you're going to change the settings on all of the breakpoints, I find it's best to stick with the same style on any custom ones you do. Otherwise it may not split uniformly.

      Reply

Leave a Comment