How To Hide A Column On Mobile Or Tablet In Elementor

There are times when you need to hide a column on Elementor for mobile or tablet devices. This is not something that Elementor shines at, and implementing it is a little counter-intuitive.

How do you hide a column on mobile or tablet in Elementor?

1. Right click on the column,
2. Click Edit Column,
3. Select the Advanced Tab,
4. Add elementor-hidden-tablet or elementor-hidden-phone to the CSS Classes
5. Click Update.

Let's walk through that, step by step.

If you're wanting to hide specific elements on Elementor, as opposed to hiding columns, see my tutorial on that here.

I've written an in depth tutorial on how to do responsive column ordering on mobile for Elementor here.

If you don't have Elementor installed and active yet, see our tutorial here.

Start by adding a row with the number of columns you want...

Alternatively, add an Inner Section and duplicate a column until you reach your desired number of columns...

Regardless of which method you use, the next step is to right click the grey column hover, then click Edit Column.

Go to the Advanced Tab and look for the CSS Classes. In there, you'll enter one of the following:

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

Each one will hide the column on that specific size of device.

For example, if you want to hide the column on mobile device, you would put elementor-hidden-phone.

One problem is that, because the CSS that allows this responsive column hiding runs after the preview, the column won't actually be hidden if you change to the preview for that size...

Hopefully this is just a bug, and they'll fix it at some point.

To see if it has worked, go to the front end for that page (click the eye icon next to the green Update button)...

Then resize the browser window to see the effect. I do it with Inspect Element in Responsive Mode on Chrome...

Notice that it literally just hides the column. It doesn't compensate widths. The way to fix that is to go back into the Elementor Editor, edit the columns that will be visible, but change it to responsive mode...

Here I'm changing the two columns that will be visible on tablet size to 50% when viewed on tablet...

And this is how it looks...

If you hide the column on tablets, it will still be visible on mobile. I think that's best, because it gives us greater flexibility.

If you want to hide a column on both tablet and mobile sizes (ie anything smaller than a desktop), you add both sizes, separated by a space, like so:

elementor-hidden-tablet elementor-hidden-phone

Notice that you can also hide elements on desktop, by using elementor-hidden-desktop. This will be especially useful if you're designing for mobile first.