How to Control Responsive Column Layouts in Elementor—REVISITED

Responsive Column Layouts in Elementor

Controlling the column layout for different responsive screen sizes in Elementor used to be…. errrrm…. less than ideal.

You created your column layout for desktop; you were stuck with that for tablet; and then for mobile, it all dropped to a 1 column layout.

You could tweak the mobile view in an obscure hidden setting that a lot of people couldn’t find, but… still not great.

I even made a video about a month ago showing you a hack for controlling the column layout better on tablet. A plugin came out to handle it too.

Well I’m delighted to say that the latest version of Elementor has made all this soooo much easier and flexible and powerful.

Let’s have a quick look at what’s changed in Elementor 1.5, and how easily you can now control responsive column layouts for all screen sizes.

 

Drop me a comment and let me know what you think. Easy, eh?

Check these posts out too...

55 thoughts on “How to Control Responsive Column Layouts in Elementor—REVISITED”

  1. HI Dave… great walk-through on this wonderful update! Thank you so much. As always, you explained everything well so it is smooth – and easy to understand.
    Just one little bit of ‘my view’… I find the music playing in the background when you are talking in the beginning and the end distracting… and just a little ‘annoying.’ But this could just be me, so don’t just take my word for it. 🙂 Either way… a great short tutorial and very much appreciated! Kindest regards.
    Monika

    • Thank you Monika! I’m glad it was useful.

      And the feedback on the music is VERY much appreciated. Honestly, I only started making videos at all about 4 months ago so I’m still learning about a million things each time. I thought the music quietly tinkling away underneath might add more interest to me droning on… 😉

  2. I can honestly say that you are a natural in explaining things with ease, Dave… and I mean it. I don’t feel that your videos are awkward or boring in any way (even without music 😉 ). And I know that I might be a little more sensitive to ‘sensory overload’ than some other people, so check maybe how others experience it. You know I’m there to listen and to hear what you have to say… you are probably getting a little tired listening to yourself – ha, ha, ha…- this is not so for your ‘audience’. You are doing a wonderful job!

    • Well thank you. 🙂 I really do appreciate the feedback. I’m prone to the sensory overload too (think it’s an introvert thing!). I’ve got some ideas to try next time. Thanks again.

  3. how to hide the extra background like the white background appears at side or back of page as page become responsive? kindly help.As the white background at the back of your purple when its responsive how to hide it?

  4. Being able to decide which columns go full width, particularly on tablet, makes a big difference as often it can break the flow between elements if all are forced to 100%.

    What also would be a great option would be the ability to change the order of columns in a section going to tablet and mobile. Think saw something somewhere but can’t find it again or whether it even related to Elementor.

    • Hi Rob. You can switch the order of columns in Section > Advanced > Responsive > Reverse Columns. There’s not a lot of control – just the last column will now be on top. It works well for most situations though.

  5. Hi!
    I’m using 2 columns, each with an icon list. They display next to each other on the computer, but on mobile it gets tricky. When I get them to display next to each other the text in the column on the left gets wrapped (the row gets taller) and the corresponding text in the column on the right (in the same row) no longer aligns with it. How can I fix this?

  6. Greetings, very good video and explanation but … at least it does not work for me, so far I have not had any problems but, after the last update, I can not change the size of the columns.
    Any ideas?
    Thank you

      • Hi Dave, same problem here, can’t change column size. It flips back to 65 %. In the inspector I found out the complete section (post-56) has its own css:
        wp-content/uploads/elementor/css/post-56.css

        In this stylesheet the column width is set to 65%:
        .elementor-56 .elementor-element.elementor-element-3b0b0dc {
        width: 65%;
        }

        Don’t know where this comes from, for I didn’t make this setting. I can probably overrule this by custom css, but I’d rather know where this comes from and how to fix it in a more gprofessional way…

        • If that 65% width setting is set in the stylesheet, it means it’s been set in Elementor’s styling controls on that widget (the one with the class of ‘elementor-element.elementor-element-3b0b0dc’ on it. Have you checked the column width settings in all responsive views? (desktop, tablet, mobile)?

  7. Is there a way to switch the order of a column in tablet and mobile view. For example have it flow from right to left on a desktop but the left to right in tablet view?

    Thanks!

  8. I literally oohed and aahed as I watched this. Didn’t want to have to think of the code to achieve this so thank you for saving my time and energy. Going to give this a try.

  9. Could you PLEASE answer this question? I find it easy to make the mobile view how I want in Elementor (mobile view > mobile > edit), but every time I edit the mobile view (I want the button on TOP in mobile view), it also changes the normal view!

    How do you change the order of content in mobile (ie – have button on top, have content on bottom in mobile, and have opposite in normal mode) without having it change it in the normal mode?

    Logic told me that using “mobile view” to edit would ONLY change the mobile view, but nope! It changes my normal view too! Do you or anybody have any insights, it’s driving me crazy 😛

    Thanks!!

    • The way mobile editing in Elementor should work is….

      Everything you set in desktop affects tablet and mobile too. Then anything you set in tablet affects mobile too. Then anything you set in mobile should affect mobile only.

      If setting a style or setting ONLY in mobile is also changing that same element in desktop view… then something is definitely amiss.

      But… the above only applies with the mobile responsive settings (like font size, colors, padding, etc). If you’re physically moving widgets around… then no, that affects all responsive views.

      The way to achieve what you want is… click the Advanced tab in the section that contains the columns you want to change the order of. Then Responsive. Then Reverse Columns (in either tablet, or mobile, or both). That should work.

  10. Hi Dave,

    Your video was very helpful! But can you explain something to me? When I insert a button in desktop mode and change the browser size, the location of the buttons relative to the background image changes. The button will cover up part of the image if the browser window is too small. Is there a fix for that?

    • Yep the background image shifts as the browser tries to fit the image in the window. The only fix is to maybe load a different background image for mobile or shift its position. You can do that now in Elementor 2.4.

  11. Hello Dave,

    Thank you for the awesome video. One question:

    How did you manage to have a space in between each column on mobile? I have four columns, stacked on top of each other without a space to separate them. (in mobile)

    • Hey Gianni. You’d add bottom margin to each column, in the Advanced tab of each column. Probably ok to add those in desktop mode, they’ll also trickle down to mobile too.

  12. Hi Dave –

    Thanks for the video. After a lot of hassle your video helped me get my pages sorted out in all 3 modes. But can the preview be trusted? I made my site active the other day and tested it on my PC and on my phone and it was fine. But when I tested it on my old Galaxy tablet I got an absolute mess – really dreadful layout with elements overlapping and the contact forms going off the page and unwanted lumps of text, especially in the Paypal widget – and most of the buttons not responding. The help desk hasn’t got back to me yet. My tech skills are less than zero so I probably didn’t frame my query well enough and won’t understand the answers. Desperate here, so any advice would be appreciated. Cheers.

    • Yeah, browser support for older devices is not great in Elementor, I’m afraid… 🙁 There’s not a lot I can say to help. I hope Elementor support got back to you? What did they say?

  13. Hi, Just to give you an overview, I am working with Elementor (not pro) and I notice even though all my plugins and WordPress are updated, I can not change any of my column widths in Tablet view. I try making the change to 50% but I see no change. But works ok when I view in tablet view and then put 50%. Any idea what can be causing this issue?

  14. Hi Dave,

    do you know how to create a fix column width with Elementor (no pro)?
    I have 3 columns on % and the middle one (menu) is breaking in two rows on page resizing.
    I would like the menu to stay in place.

    Thanks

  15. Hey Dave — great video as always. Question though: everything looks great in tablet and mobile views when the devices are held in portrait mode (because that’s what it’s being edited as in Elementor). But when the device is rotated to landscape/horizontal, it’s a bit of a mess (text overlaying objects, etc.). I understand why this happens as the page is designed in the default portrait mode, but surely Elementor hasn’t overlooked this issue and given us to fix for it, have they?

  16. Hi Dave, many thanks for the helpful videos. I was wondering if you might be so kind as to help me with this. I can’t seem to isolate the responsive settings without affecting the other views.
    For instance, when I change the size of the font in a heading (in any view), it affects all of the other devices as well. Also, if I select to hide a section on a device, it still shows on the preview of the device it is supposed to be hidden on.
    I started building my page in mobile view and wanted to work backwards to desktop view, is this anything to do with it?
    Many thanks in advance.

    • Hi Louise – previews do still show everything, unfortunately. The way responsive editing should work is that everything in Desktop also affects Tablet and Mobile. Any changes in Tablet affects Tablet and Mobile. And any changes in Mobile affect mobile only. Changes in mobile, for example, shouldn’t affect larger screens. Is that what’s happening?

  17. Hi Dave, I’ve been searching everywhere and haven’t found anyone addressing this…

    Is there a way on mobile to order elements by row rather than column?

    So I have a 3 x 3 grid of images – on mobile it shows the images from column 1, then column 2, then 3. I need to show the images in row 1, row 2 then row 3. Hope that makes sense?

    In bootstrap you can use push/pull to achieve this…

    Any help appreciated!

  18. Hey Dave, I have a three column row with a video in the middle column and content on either side. On mobile I would like for the video to be on top. I know you can reverse the order to it goes 3-2-1 instead of 1-2-3, but in this case I need 2-1-3 or 2-3-1. Is this possible?

    Thanks!

  19. Hi Dave

    I saw one of your videos where you reduced the display of 2 columns on mobile/tablet to 50% so they appeared next to each other horizontally and it works great.

    My problem is I have 3 columns next to each other horizontally on desktop and I want it so that mobile/tablet view displays the same. If I use 33% for each column there is a 1% gap at the end and it looks bad.

  20. Dave
    I love your videos but have a huge problem with elementor regarding responsiveness.
    Did you ever try to check the layout on mobile and tablet horizontally ?
    While all my designs are great adjusted across all the devices horizontally this is a nightmare.
    I have contacted elementor and they can’t help because there are no horizontal layout switches and feature implemented to elementor at all.
    They said that horizontal elementor layout is equal to horizontal PC and this is not true.
    I’m surprised that none has the same issue as me.
    I don’t talk about 4 perfect square section frames and pictures there I’m talking abou the design where are many adjustments, so for example where you have 4 pictures every is sliding off to different side by padding, hope you can imagine what I mean. I’m curious to know if you guys are having the same kind of issues and how are you handling them. Or you just not bother as everyone is using vertical modes hahah ?
    Thanks for your time
    Best Regards,

  21. Excellent – a real help. What I liked about the video is in is sensibly paced, some other videos are so fast and don’t fully explain why settings are being changed and are therefore difficult to follow. Thanks for your help.

  22. Thank you for shining some light on the features discussed in your video.
    I am struggling with the idea to control such layouts in greater detail.
    For example the alignment of columns in a section that is wider than the column itself.
    I can’t get the column to align center.
    An example:
    I am working with a standard three column layout for a particular section with different topics that I want to highlight. I do that quite a lot.
    Let’s say I want the columns to not get very narrow on a tablet screen, so I would give the columns a width of 50% for tablets. This means the third column will not have space to sit next to the first two columns. The problem I am facing is the alignment of the 3rd columns when it breaks in the next row. It just keeps sitting on the left side, no matter what setting I choose for the section alignment or. I have tried to use a css class for the parent container and add some css code to the theme’s stylesheet.
    Here is an example of the CSS code I tried:

    .centered-container {
    text-align: center; width: 100% !important;
    }
    .centered {
    width: 100% !important;
    }
    .centered div {
    margin-left: auto !important; margin-right: auto !important;
    }
    No luck! I can apply this to the parent container and nothing happens. The 3rd column sticks to the left side of the parent container. I am wondering of I could control this more easily with some flexbox css code. I think I am going to try this now.

    How would you approach this kind of scenario?
    How to control the alignment of columns that are less wide than the parent container?
    I have tried to nest columns/sections into each other but that did not work for me either.
    From my perspective, this is a real weakness in the way Elementor allows me to control the alignment of some elements, even though in its entirety it is an amazing tool.
    I am really struggling with this!

  23. Hi Dave your video is very helpful.However, I still have one problem,that is the social media icons I placed in the footer section grows taller(column ) when reaches some maximum height.I tried but I cannot fix it.Please help me out. I want all of them to be displayed in a single row like in the desktop view.
    Thank you

  24. Hi,

    How do I adjust the width of my mobile version on Elementor (not pro) to full screen, there’s a blank white section to the right and am not sure of how to resolve this. TIA

  25. Thank you very much Dave, I just begin with Elementor and this kind of video is veeeeeery helpful!
    Keep up the good work dude!

Leave a comment

Tweet
Share