<\/figure><\/div>\n\n\n\nThat's all there is to it.<\/p>\n\n\n\n
Now when you view the page on difference sized devices, it will preserve the two column layout.<\/p>\n\n\n\n
You can use the same method with three or four column layouts.<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
You might do a four column side-by-side on mobile if they're something like FontAwesome icons, maybe as links.<\/p>\n\n\n\n
How to display two columns on mobile with the Elementor Inner Section widget<\/h2>\n\n\n\n For this example, we're going to work with a layout that has two quarter-width columns and a half-width column.<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
The concept will be the same as the previous example, but the steps will be slightly different.<\/p>\n\n\n\n
We start by setting up a new row with two columns.<\/p>\n\n\n\n
Then we add the Inner Section<\/em> widget to the left column.<\/p>\n\n\n\n <\/figure><\/div>\n\n\n\nWe add the content to all three columns.<\/p>\n\n\n\n
For continuity, the two columns in the Inner Section<\/em> will have our two images, in the same order.<\/p>\n\n\n\nWe put a text box in the half-width column.<\/p>\n\n\n\n
This tutorial applies to any combination you like.<\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\nAs you can see in the image below, Elementor defaults to the inner sections becoming full-width.<\/p>\n\n\n\n
We want that black image to sit next to the blue image.<\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\nWhen 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<\/em>.<\/p>\n\n\n\nRight click the column icon for the Inner Section<\/em>.<\/p>\n\n\n\n <\/figure><\/div>\n\n\n\nClick \"Edit Column\", then click the desktop icon next to Column Width (%)<\/em>.<\/p>\n\n\n\n <\/figure><\/div>\n\n\n\nChoose the mobile icon and enter \"50\" into the Column Width<\/em> box.<\/p>\n\n\n\n <\/figure><\/div>\n\n\n\nHover over the second Inner Section<\/em> widget column.<\/p>\n\n\n\nRight click the column icon, then choose \"Edit Column\".<\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\nThe mobile icon should still be highlighted, but if not, click that.<\/p>\n\n\n\n
Enter \"50\" into the Column Width<\/em> box.<\/p>\n\n\n\nNow you see the images sitting nicely next to each other, with the text underneath.<\/p>\n\n\n\n
Click the green \"Update\" button at the bottom to save your changes.<\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\nI hope you found this tutorial useful. Now you know how to display two columns side-by-side on mobile in Elementor.<\/p>\n","protected":false},"excerpt":{"rendered":"
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<\/p>\n","protected":false},"author":2,"featured_media":585,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[],"yoast_head":"\n
How To Display Two Columns On Mobile In Elementor<\/title>\n \n \n \n \n \n \n \n \n \n \n \n\t \n\t \n\t \n \n \n \n\t \n\t \n\t \n