Flexbox Tricks Are An Elementor Game Changer
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%;
}
Testing Usability on Elementor Pro 3.62
After being out for a while, I wanted to re-visit this post thanks to a comment from Matthais below. I’ve been out of Elementor for a while working full time on Marketing for a site built with DIVI, so I’m a bit rusty, but I wanted to check and see how things are now.
Obviously, until they get rid of flex-box you’ll always be able to use it in one way or another on any site, including an Elementor site, but the custom code that is Elementor specific could certainly change at any time!
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!
7 Responses
A great trick that changes the game!
Is it possible to place more than 10 columns in a section with this trick?
As far as I know, you can’t in Elementor, (unless something has changed)
But, you can just create it in HTML and embed it inside of an Elementor module. I made a quick test here to show it http://box2407.temp.domains/~drugstor/eledesignhelp/test/
Hi and thanks a lot.
I think in Elementor version 3.5.5 /Pro 3.6 this trick no longer works. It no longer works for me.
… update for elementor 3.5.5 / pro 3.6.2:
for the section you only have to use
selector .elementor-container {
flex-wrap:wrap;
}
no .elementor-row anymore.
Thanks for this! My day job has me working in DIVI all the time now so I’m way behind on the latest and greatest in Ele!
very thanks buddy this help alot
Very Welcome!