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:
- Create your columns in Elementor
- Right click the first column and edit it
- Under Layout, switch the Column Width to mobile view
- Change the width to 50
- Repeat for the second column
- 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.