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.

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

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;
	}
}

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”.

Leave a Comment