• Home
  • /
  • Blog
  • /
  • How to Set 2 column side by side on Mobile in Elementor

How to Set 2 column side by side on Mobile in Elementor

Posted in Elementor Gudies   on  February 28, 2023 by Shoaib

Do you know 60% of website traffic comes from mobile devices?
The responsiveness of your website is an essential factor in your Google ranking.

In fact, 40% of users have gone to a competitor's website after a poor mobile experience.

Google focus on mobile-first indexing when ranking website. Your website must be user-friendly on a smartphone to get Google's approval.

Websites that aren't optimized for small-screen devices can experience a decline in their search engine rankings. This means they are not getting found online.

How to make your WordPress website Responsive?

There are many ways to make your WordPress website mobile-friendly.

  • Use a Responsive WordPress theme on your website.
  • Do it manually.
  • Use famous drop-and-drag page builders like Elementor, Divi, and Thrive Architect.


Elementor is a free and widely popular page builder for WordPress. Elementor lets you create a custom WordPress theme from scratch without writing a single line of code.

How To Change The Number Of Columns On Mobile in Elementor

How to put 2 column side by side in Elementor page builder is a common question many users ask. Let's uncover it.

What are the uses of creating two columns in mobile view?

  • Put your blog post in two columns grid layout.
  • For Aligning two videos or images per row on mobile.

Here is the problem:

As you can see, I have two columns with a vertical layout on the mobile view.

Column are in the vertical position

Let's see how we can Display 2 columns on the mobile view in the Elementor page builder.

Step 1: After selecting the first column, set the 50% width under the Edit Column tab. 

Step 2: Repeat the process with your 2nd column as well.

Set 50% width to display two column in a same row in elementor

Boom! I have successfully set the 2 column side by side on Mobile in Elementor by using just simple 2 steps.

At this point you may need to know how space between two column.
Read Also: How to Put 2 Buttons side by side in Elementor

successfully set the 2 column side by side on Mobile in Elementor

Final Thoughts

Changing the number of Columns on the Mobile is as simple as designing the website using the WordPress top drag-and-drop builder Elementor.

After reading this guide, I hope you can display 2 columns on mobile view—happy learning with Elementor.

Some Useful Articles

About Shoaib Akram


I've been in the business of writing, marketing, and web development for a while now. I have experience in SEO and content generation. If you need someone who can bring life to your words and web pages, I'm your guy.

Leave a Reply

Your email address will not be published. Required fields are marked

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
Subscribe to get the latest updates