Elementor Pro Tip: How to Control the Column Layout In Tablet View

Elementor Pro Tip: How To Control The Column Layout in Tablet View

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.

@media (min-width:768px) and (max-width:950px) {
    selector .elementor-row {
        flex-wrap: wrap;
    selector .elementor-column {
        width: 50%;
Adjust columns in Elementor's responsive tablet view

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!

Check these posts out too...

17 thoughts on “Elementor Pro Tip: How to Control the Column Layout In Tablet View”

  1. hi! I have a problem doing this in element or 1.5, the css don’t work but in elementor 1 the css is working fine, anyways to fix this? thanks dave!

    • Hey Harvey. I’m literally right now making a video update to this video. 🙂 You don’t need the CSS anymore, you can do it all in Elementor 1.5’s default editor.

      I’ll post the video in about an hour here on the blog and on YouTube. Hang tight.

  2. hi! looking for your advice. I use xampp for localhost development, using elementor pro. I have a 2-col section that I made my site header, with one col having my logo and another having nav menu. This section looks good in tablet view (ctrl + shift + M, on firefox) while on localhost; but it changes to one on top and one at bottom after migration to live host. cannot figure what went wrong there.

  3. Hello,
    First of all, thank you for your videos!
    I am interested in creating a header that has a logo on the left and three horizontal spaces in the right side. The size of the logo table/box should be equal to the three items on the right. How can I do that? for example, the left box 120pix and the right 3 boxes each at 60pix. I hope you understand what mean.

    • Hey Zel. You’d create a 4 col section. Then in the column settings for each column (hover over each column, it’s the icon that appears top left) you can set the % width of each one.

      So I guess in your case you’d have the 1st at 40% and the others at 20% each?

  4. Hello, really great video content.

    By the way, I can not see mobile width option from [section>advanced].

    How can I do this ? Please help.

    I am using elementor pro.

  5. Hi Dave,
    I have 1 webpage in particular that has “wordwrap” and it includes 2 callout boxes (created in Elementor, saved as template then brought in on the template widget). I’ve been told that Elementor does not create fixed width sites, only responsive. For the section described (excluding the menu, header, footer etc) I wonder if you know of a way to, at least on the desktop, make it stay as is without columns shrinking when changing to a different desktop machine/screen size. I have also found that if the menu bar happens to be a black strip with the text on it vertically centred, when the screen width changes, so does the alignment and the text moves down rather than stays centred vertically.
    Here is the page in question. This isn’t meant to be live yet.

  6. I have a layout with 4-5 columns that look great on larger screens. However in landscape on ipad pro, it is very scrunched. The tablet mode works great for portrait mode, but the landscape mode scrunches the columns content. Is there a way to add columns for screens that cap at 1113px witdth? I want 4-5 for desktop, and then show 3 for landscape on ipads.

  7. Hi, I have the latest elementor pro. Is there a chance to set a minimum width in px (not %) to a specific column? Cheers

  8. Great Video Dave, thanks for sharing it. I’m learning a lot with your videos. I have a question to see if you can help me. I want to learn how to rearrange columns according to the screen. For example: I have 4 columns (desktop) and I want to change the order for mobiles, for example, I want the fourth column in the first position, the first in the third position and so on. I do not know the instruction in CSS to do so. Thanks in advance


Leave a comment