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...

21 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

  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.

Leave a Comment

Tweet
Share
Share