How To Display Two Columns On Mobile In Elementor

As a web designer, it's important that your website looks good on all sizes of screens.

Sometimes you need to display two columns side-by-side on mobile.

Elementor defaults to having columns be full width on the smaller screens.

Usually that's what we want, but how do you get this dark image to sit up next to the blue image on a mobile?

How to display two columns on mobile in Elementor:

  1. Create your columns in Elementor
  2. Right click the first column and edit it
  3. Under Layout, switch the Column Width to mobile view
  4. Change the width to 50
  5. Repeat for the second column
  6. Click Update

The process is the same if you're using the Inner Section widget to manage your columns.

I'll show how to do this with the Inner Section widget below, for more control over layouts, but let's walk through the "normal" way first.

Make sure you have Elementor installed and active. See our tutorial here if you need help with that.

Add a new row and select the Two Column structure.

Add your content to the two columns.

For this tutorial, we're just doing two images, but you can put anything into the columns, as long as they will resize.

You need to Right Click the column icon. If you don't see it, just hover over the column.

We'll do the blue image column first.

Left click "Edit Column".

Click the desktop icon next to Column Width (%).

This will make visible the tablet and mobile options.

Click the mobile icon.

Enter "50" in the box next to the mobile icon.

Remember that this is in percent. So if you want the two columns to be 1/4 and 3/4, then you'd put "25" in this box and "75" in the box for the other column.

You don't add the percent sign. Just the number.

You'll see the first column change to half the width, with the second column still at full width.

Do the same thing for the second column.

  • Right click on the column icon for the second column,
  • click "Edit Column",
  • change into mobile settings (if it's not already in mobile settings),
  • then enter "50" (or some other width percentage).

You'll see the column update as you type.

Once you're happy with the look, click "Update" to save your work.

That's all there is to it.

Now when you view the page on difference sized devices, it will preserve the two column layout.

You can use the same method with three or four column layouts.

I don't usually recommend having more than two columns displaying side-by-side on mobile. It's better to let the content "breathe" with a bit of space.

You might do a four column side-by-side on mobile if they're something like FontAwesome icons, maybe as links.

How to display two columns on mobile with the Elementor Inner Section widget

For this example, we're going to work with a layout that has two quarter-width columns and a half-width column.

Our plan for mobile is to have the two quarter-width columns become two half-width columns and the half-width column become a full-width column.

The concept will be the same as the previous example, but the steps will be slightly different.

We start by setting up a new row with two columns.

Then we add the Inner Section widget to the left column.

We add the content to all three columns.

For continuity, the two columns in the Inner Section will have our two images, in the same order.

We put a text box in the half-width column.

This tutorial applies to any combination you like.

As you can see in the image below, Elementor defaults to the inner sections becoming full-width.

We want that black image to sit next to the blue image.

When you hover over the blue image, you will see the column icon for the column, as well as the column icon for the Inner Section.

Right click the column icon for the Inner Section.

Click "Edit Column", then click the desktop icon next to Column Width (%).

Choose the mobile icon and enter "50" into the Column Width box.

Hover over the second Inner Section widget column.

Right click the column icon, then choose "Edit Column".

The mobile icon should still be highlighted, but if not, click that.

Enter "50" into the Column Width box.

Now you see the images sitting nicely next to each other, with the text underneath.

Click the green "Update" button at the bottom to save your changes.

I hope you found this tutorial useful. Now you know how to display two columns side-by-side on mobile in Elementor.

Mike Haydon

Thanks for checking out my WordPress and coding tutorials. If you've found these tutorials useful, why not consider supporting my work?

Buy me a coffee

68 thoughts on “How To Display Two Columns On Mobile In Elementor”

  1. Thank you! I was close to crying, I swear, until I found your post about this. So simple once you know, right?! Thank you!

    Reply
    • Yeah it's not terribly intuitive, is it? I think I stumbled across it when I was looking for something else. Glad it helped!

      Reply
      • Hi Mike,
        Any chance you can help me again?! I had the multiple columns working on mobile after reading your tutorial. But now it's gone back to one big fat column on mobile - both tablet and phone view. I don't know why. I have followed your exact steps again. But I can't get it to go into 2 columns on mobile. Have you ever had it 'stop working'??
        Terra

        Reply
  2. Well works for single stuff. But the gallery is still stupid as hell. No change possible without hacking to show different columns amounts depending on the display size...Jeez I loved to make pure static html/css.

    Reply
  3. I'm not very good with building a website or so, so when I ran into this problem I was a bit devastated because I came so far and now I needed to make the pictures on the mobile theme smaller. I found your article, I gave it a try, within 2 minutes I transformed my whole mobile page. Holy moly. I just wanted to leave a comment to say thank you and to keep pushing, you're amazing!

    Reply
  4. Hi again!
    A few weeks ago I asked again for help with columns. But I figured it out! I was using Safari (which I had used all along) but then learned somewhere that in Tablet view, Elementor columns don't always reflect the changes. So I was doing the right steps, and the changes did work, BUT the changes weren't showing up when I looked at 'Tablet View', in Elementor.
    I looked on my iPad, and the changes are there. So now I use Chrome when I am making changes to my website. Seems to work better, for seeing changes in Tablet view.
    Terra

    Reply
  5. You are just awesome. I was scratching my head and trying to figure out how to do and you made it very simple. Thanks a lot.

    Reply
  6. damnnnn, ive been through like 10+ post on how to add two columns .i was trying from so long, literally the only post i found which helped!! i never comment but this post deserves it!

    Reply
  7. Would this also work if you'd like to do something other than 50% - 50% for each image? For instance 30% for the first image and 70% for the second image?

    Reply
  8. Amazing thanks so much! But one thing....After doing the 2 side-by-side columns, I tried adding an icon list to each, but it looks really messed up on mobile...any thoughts?

    Thanks again for the article!!

    Reply
  9. I have never commented on blogs or articles, but THIS was amazing! THANK YOU SO MUCH! Having to bring two elements together seemed impossible, very well-written piece. Following your blog!

    Reply
  10. it is really great and useful, straight to the point and will crafted tut, thank you Mike for spending time to share this trick

    Reply
  11. Same as all the other comments, I was fiddling around with my elementor columns for 15 minutes and couldn't get it, thanks so much for making this quick easy guide!

    Reply

Leave a Comment