<\/figure><\/div>\n\n\n\nAlternatively, add an Inner Section<\/em> and duplicate a column until you reach your desired number of columns...<\/p>\n\n\n\n <\/figure><\/div>\n\n\n\n <\/figure><\/div>\n\n\n\n <\/figure><\/div>\n\n\n\nRegardless of which method you use, the next step is to right click the grey column hover, then click Edit Column<\/em>.<\/p>\n\n\n\n <\/figure><\/div>\n\n\n\nGo to the Advanced Tab<\/em> and look for the CSS Classes. In there, you'll enter one of the following:<\/p>\n\n\n\nelementor-hidden-desktop<\/li> elementor-hidden-tablet<\/li> elementor-hidden-phone<\/li><\/ul>\n\n\n\nEach one will hide the column on that specific size of device.<\/p>\n\n\n\n
For example, if you want to hide the column on mobile device, you would put elementor-hidden-phone<\/em>.<\/p>\n\n\n\n <\/figure><\/div>\n\n\n\nOne 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...<\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\nHopefully this is just a bug, and they'll fix it at some point.<\/p>\n\n\n\n
To see if it has worked, go to the front end for that page (click the eye<\/em> icon next to the green Update button)...<\/p>\n\n\n\n <\/figure><\/div>\n\n\n\nThen resize the browser window to see the effect. I do it with Inspect Element in Responsive Mode on Chrome...<\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\n <\/figure><\/div>\n\n\n\nNotice 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...<\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\nHere I'm changing the two columns that will be visible on tablet size to 50% when viewed on tablet...<\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\nAnd this is how it looks...<\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\nIf you hide the column on tablets, it will still be visible on mobile. I think that's best, because it gives us greater flexibility.<\/p>\n\n\n\n
If you want to hide a column on both<\/em> tablet and mobile sizes (ie anything smaller than a desktop), you add both sizes, separated by a space, like so:<\/p>\n\n\n\nelementor-hidden-tablet elementor-hidden-phone<\/code><\/pre>\n\n\n\nNotice that you can also hide elements on desktop, by using elementor-hidden-desktop<\/em>. This will be especially useful if you're designing for mobile first.<\/p>\n","protected":false},"excerpt":{"rendered":"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? Right click on the column, Click Edit Column, Select the Advanced Tab, Add<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[],"yoast_head":"\n
How To Hide A Column On Mobile Or Tablet In Elementor<\/title>\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\t \n\t \n\t \n