Casey Whitcher Profile
Casey Whitcher
Show Some Love, Share!
Share on facebook
Share on twitter
Share on linkedin

Post Contents

Flexbox Tricks Are An Elementor Game Changer

Flexbox for Elementor
CSS
Casey Whitcher Profile
By
Casey Whitcher
Show Some Love, Share!
Share on facebook
Share on twitter
Share on linkedin

Post Contents

How Do I Stack 100% width Columns In Elementor?

Elementor is an amazing page builder that is quickly becoming the most popular way to build WordPress pages. 

Natively though, it does have a few limitations.  

By default, the builder will only allow you to create columns inside of a row (section) as percentages of that row summing up to 100%

This can create difficulty in setting up your columns to stack on desktop, or to have a fixed width for one and an expanding width for another. 

Today we’re going to see how you can accomplish all of these tasks and more with a couple of quick CSS rules.

Sure, this will let you stack columns at 100% width on desktop, but it does so much more!

We’ll explain how we created these stacked columns in a bit and, we’ll see what else we can do by utilizing flexbox as part of our design mix.

The First Bit Of CSS

The first thing we have to do is add some CSS to the main container Section.   

You can do this either right on the section in the editor

right-click > Edit Section

Or,

You can do this in the navigator with your mouse over the section that you want to add this to, a

right-click > Edit Section 

We will add:

selector .elementor-container .elementor-row{
flex-wrap:wrap;
}

*Note – You could add a class onto your container (section) instead.

Then, target that class with external CSS.

For the sake of this example, we’re going to put all of our CSS right inside the elements.

What Is Happening?

This is using basic flexbox functionality. You can reference it here:  https://css-tricks.com/snippets/css/a-guide-to-flexbox/

This first CSS sets up the contents of the section so that column widths can be set and will wrap if wider than the container. 

By default, Elementor for desktop won’t allow you to have multiple columns in a section that add up to more than 100%. 

If you were to try to set 2 columns to 100% each, Elementor would change them to 50% / 50% or something like 99% / 1%.  

This code will fix that!

This is using basic flexbox functionality. You can reference it here:  https://css-tricks.com/snippets/css/a-guide-to-flexbox/

With this flexbox style added, we can set our columns and inner sections to whatever we want. 

Setting Our Column Widths

Because we can set any kind of width that we want, here is our first example, a section with two columns stacked at 100% each.

selector{
width:100%;
}

selector{
width:100%;
}

Let’s expand this a bit.

For example, if you want one column full width, and two underneath it to be 50% you can do that with this code:

For the first Column:

selector{
width:100%;
}

For the second and third

selector{
width:50%;
}

Note* You can NOT mix and match  Elementor styled column widths and CSS.  You have to use CSS, or Elementor, not both.

selector{
width:100%;
}

selector{
width:50%;
}

selector{
width:50%;
}

Common Column Width Issues Solved

Here’s a common scenario.  You want your left column set at say 200 pixels.

You want the other column to grow and shrink to take up the rest of the space. Think Main Header!

selector{
width:200px;
}

selector{
width:calc(100% – 200px);
}

How about we set left at 200px, right at 300px, and then adjustable in the middle?

Let’s do it.

selector{
width:200px;
margin-top:20px;
}

@media (min-width:1px) and (max-width:768px){
selector{
width:98px;
}
}

selector{
width:calc(100% – 500px);
margin-top:20px;
}

@media (min-width:1px) and (max-width:768px){
selector{
width:calc(100% – 196px);
}
}

selector{
width:300px;
margin-top:20px;
}

@media (max-width:768px){
selector{
width:98px;
}
}

Dealing With Mobile Views

As you might expect, if we change our view to mobile, or tablet, these constant pixel widths will need to be adjusted.

For the boxes above, we added in a couple media queries to tell Elementor to size our columns differently depending on the resolution of the device we’re on.

We have to respect the Elementor widths so we will adjust our mobile design to work on any device smaller than 768px, and our tablet layout to work on any device between 767px and 1025px, or minimum 768 pixels, to a maximum of 1024 pixels.

For instance,

For our Mobile we are going to use :

@media(max-width:767px){
width: 50%;
}

For tablet we are going to use something that looks like this:

@media(min-width:768px) and (max-width:1024px){
selector {
width: 100%;
}

If you resize your browser window, or, hit F12,  (ctrl + shift + m)  you can see this layout on mobile.

Inner Section Possibilities

Let’s add in the inner section and use the same flex options that allow us to set our columns to whatever we want. 

This inner section will inherit the ability to adjust columns from the parent section.

I’ll use a border to show my two inner sections. 

Notice the two inner sections are also stacking their contents instead of side by side.

Check out the styles I’m using to see how this is set up. Be sure to switch back and forth to mobile to see the difference.

selector{
width:30%;
}

(mobile)
selector{
width:20%;
}

selector{
width:70%;
}

(mobile)
selector{
width:90%;
}

(for my inner sections)
selector{
width:50%;
}

selector{
width:100%;
}

selector{
width:100%;
}

selector{
width:100%;
}

selector{
width:100%;
}

Justifying Content

Elementor’s user interface uses flexbox rules and labels so this next part will look familiar.

We can use the same flexbox settings right in our CSS to align our content to the right, left, or center.

Consequently, justifying content can be set inside of Elementor, but, if you want to keep your code in one place and not go hunting through elements, this is how you would do it.

Assigning one of these classes either in the element CSS itself, or targeting an item with CSS.

selector{
//just pick one not all three
justify-content:start; (default)
justify-content:center:
justify-content:end;
}

The same thing done when targeting by class;

.my-cool-classname{
//just pick one not all three
justify-content:start; (default)
justify-content:center:
justify-content:end;
}

For my main section below, to get center on mobile, and right or end above mobile I used:

selector .elementor-container .elementor-row{
flex-wrap:wrap;
justify-content: end;
}

@media (min-width:1px) and (max-width:768px){
selector .elementor-container .elementor-row{
justify-content:center;
}
}

If you check out this page on both desktop and mobile you can see the changes and the corresponding code.

selector{
width:50%;
}

(Mobile)
selector{
width:100%;
}

selector{
width:50%;
}

(mobile)
selector{
width:100%;
}

(for my inner section)
selector{
width:100%;
}

(for my next inner)
selector{
width:65%;
}

selector{
width:100%;
}

selector{
width:75%;
}

selector{
width:100%;
}

selector{
width:50%;
}

Credit

These are my personal notes from watching a fantastic video by ooohboi. You can find the video here! I highly reccomend you check out all of his other videos. 

Final Thoughts

This is one of those tutorials that you need to commit to memory. 

These techniques really open the door to more possibilities for creating layouts based on a design created in UI applications like Adobe XD, Sketch, or Figma

Has this tutorial helped you out? 

Is there something I need to fix or something else you would like to see? 

Let me know in the comments!

2 Responses

  1. A great trick that changes the game!
    Is it possible to place more than 10 columns in a section with this trick?

Leave a Reply

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

Related Articles

Technical

GTM + WooCommerce + Facebook Pixel!

Crocoblock

The Big List Of Crocoblock Widgets

Crocoblock

See All JetTricks By Crocoblock On One Page

CSS

Creating Two Color Backgrounds In Elementor

RELATED
Technical

GTM + WooCommerce + Facebook Pixel!

Crocoblock

The Big List Of Crocoblock Widgets

Crocoblock

See All JetTricks By Crocoblock On One Page