Elementor Responsive Columns Settings

Elementor Responsive Columns Settings

In this tutorial I want to explain how you can use Elementor responsive columns settings to display column next to each other on tablet and mobile view.

By default, columns are displayed below each other on the mobile view. For example I will show you how to display 2 or 3 columns next to each other with Elementor for those devices.

Table of Contents

Elementor Responsive columns are displayed below each other on mobile view by default

For this example, I have a heading widget and I also have section below with four different columns. Each column has a button widget placed inside of it. On the image below so you can see how it looks on the desktop.

Elementor responsive columns tutorial

If I now go to the tablet view that it’s displayed like this so also four buttons besides each other

Responsive columns Elementor Tablet Elementor responsive columns tutorial

On the mobile view now you can see that the buttons are placed below each other by default

Responsive columns Elementor Mobile Responsive columns Elementor Tablet Elementor responsive columns tutorial

Elementor Responsive columns settings to display 2 columns next to each other

Let’s say for the mobile view you don’t want the buttons placed below each other but you want to display two buttons next to each other horizontally.

You can do it as follows, first you need to do is select the column by clicking on the Gray square or you can use the navigator. Then you need to go to the Layout settings over here which is selected by default. Now you can see the Column width option over here and it’s set to 100. So that means that the column width is 100%

Elementor Column width 100% Responsive columns Elementor Mobile Responsive columns Elementor Tablet Elementor responsive columns tutorial

To display 2 columns next to each other you need to change this to 50% and now you can see that the column is smaller on the mobile view.

Elementor Column width 50%

If you also select the column below it and set the column width to 50% then the two columns will be displayed next to each other.

Elementor Column width 50% 2 Elementor Column width 50%

Elementor Responsive columns settings to display 3 columns next to each other

You can also place three columns next to each other by setting the column width of 3 columns to 33.3%

Elementor Column width 33.3% Elementor Column width 50% 2 Elementor Column width 50%

You can watch the tutorial on YouTube over here.

Check out this tutorial to learn the Elementor basics in 7 minutes.

If you have responsive issues with designing in Elementor for mobile or tablet view you should check out this tutorial. There I explain how you can fix this very easily.

I hope this tutorial is helpful. It that’s the case make sure to subscribe to the channel and drop a like and comment. Thanks, and I hope to see you back in the next tutorial!