Generally speaking, Elementor’s responsive editing features are pretty good.
But a lot of people get stuck trying to fully control the column layout in the tablet view. The editor doesn’t really give you any control, at least not at the moment. If you want to control how many columns there are side-by-side on tablets, using the default controls…. you’re out of luck!
So in the meantime, I want to show you a trick to get around this. Watch the video below to learn how to control how many columns there are side-by-side in tablet view in Elementor.
[box color=”yellow”]NOTE! THIS TRICK IS NO LONGER NECESSARY AFTER ELEMENTOR 1.5 – Check out my update video here.[/box]
Ha! Realised at 1:10 I say I’ve “made a 4 column layout”, even though clearly it looks like 3. I didn’t realise I had the screen zoomed in too much at that point. Doh! There actually were 4 columns – you just can’t see the last one. 🙂
The custom CSS code I use in the video is below for you to copy/paste into your own projects.
Huge thanks to Joel Eade, who posted the original code idea for this in the Elementor Facebook group, and Lyle Chamney, who improved it further. I’ve tweaked it a tiny bit too, but wouldn’t have come with anywhere near as elegant a solution without their help. Thanks guys!
NOTE: The method I show you in the video (the quickest and easiest) requires the Pro version of Elementor (affiliate link).
Comments? Questions? Hit me up in the comments below!