Stack Widgets Side by Side that Adjust # of Items for Screen Width in Elementor?

I saw this question here which sort of presented a solution at Github but nothing was explicitly listed out. So I wrote this step by step guide to help anyone who got stuck.

1 – Make your section, columns and put all your widgets in 1 column.

2 – When making content widgets, make sure all the content widgets (“testimonials” in the example below) have a class name. In our example, we use “custom-flex-box” as class

Click on the content widget. Advanced. CSS Classes.

You need to add this class to ALL content widgets.


3 – Click on Column, “Advanced” tab, “Custom CSS” box. Type in the following:

display: flex;


3 – In CSS, add the following code for 3 widgets per row:

width:33% !important;
padding: 20px 20px !important; /* added this for some extra spacing between each widget so it looks better - feel free to adjust */

4 – Save and check on PC that it is showing 3 per row instead of 1 per row.

If it does not show properly, then you got an issue. Make sure all the class names are set correctly.

5 – Now what if you want to set different 2 widgets per row for smaller screens? Easy. Use media queries.

@media only screen and (max-width : 767px) {

width:50% !important;


6 – check on responsive mode that this works (it should!)

7 – want different spacing / gap? Look at #3 above and adjust the padding code as you wish.

That’s it!

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>