This is incorrect. Column Gap is the space between the element or widget and the edge of the column (the gray dotted line). When you adjust the drop down Column Gap setting, nothing changes between the columns and the sections. The change will happen in the space between your spacer widget and the column dotted line. I really appreciate this video because it showed me how to set up the experiment, but after a while, I realized it wasn't changing the space between columns, but it was changing the space between the widget and the column. Thanks!
Something so simple, and yet I spent way too long trying to figure out why I couldn't adjust the column gaps. Thank you so much for sharing this great tip!
They're not equally spaced though. If you measure the green, blue and orange sections, they are: 330px / 330px / 320px - The margin bit at the end where you de-linked and set to 0 eats in to the last column which does not have its value to to 0.
Why don't I see the flyout menu that's visible in your video and many other videos? There is no flyout with my Elementor Pro. Also, any idea why no gaps appear between multi-column sections by default in Elementor? Is there not a simpler way to apply a gap to all columns without having to manually add a padding to each column? When I add a gap it does nothing. I'd think this would be simpler.
Hi graphicartdude, Not too sure what you are referring to as the "flyout menu". Bear in mind that this video is rather dated and is using an older version of Elementor so functionality has probably changed since it's creation. If you have not done so already, perhaps take a look at the updated version of the Column Gap that uses a more recent version of Elementor: snifflevalve.com/elementor-tutorials/elementor-column-gap-explained/ Cheers! Lyle
Hi Lyle, so I am having exactly this issue with a three column element. I'm using the free version of Elementor, there does not seem to be a column gap field to adjust. Is there a way to do it with the free version?
By doing this like in my case I make the content area in negative value which removes the space between the header and content but on mobile, the hamburger was unclickable because the content overlays it.
My approach: For example, if you have two blocks and you want to set the "gap" between them, set margin-right to whatever value you want to put for one object one in Desktop mode, then margin-right equal 0 for tablet and mobile. Then for object two, do the same but with margin-left.
Elementor's approach to spacing is such a headache. It changes in the tablet and mobile views requiring constant tinkering. Anyone know how to add more white space to all Elementor page content without having to adjust each section? In tablet and mobile view the content shows nearly touching the edge of the screen. I can't find any answer to this. All that appears in forums and Google are how to add white space. Thanks.
You are right. For me, I'm looking for a way to finish the white space that has been added automatically by the 'container' in Elementor. Cant find anyway around it
Sumbal Tasawwar Yeah it’s a pain. Good to know I’m not the only one. Another issue I experience is when I hide sections for mobile... it prevents me from being able to scroll to the top of the preview to make further edits.
Hi John, Your best bet would be to post this in the Elementor Facebook group where you can show a pic and post a URL so that I and others can take a look. Cheers! Lyle
Column spacing basically doesn’t work in Elementor. All it does is add a hidden padding to the columns, that’s why you have to add the margins yourself if you want a background, or if you want your columns to line up on the far left and far right with the rest of the pages content, just set the column spacing to none and do it yourself. Shame, it’s a simple feature that works perfectly in thrive architect. Also, don’t forget to take away those uneven margins in the mobile versions otherwise your columns won’t line up when stacked vertically on a mobile device. It’s a lot of work for something that should be a simple px input box
this is not column gap adjustment. You are modifying padding and margins which can be the case, but does not apply if there is text inside and you corrected responsiveness for all the rest of screen types. Using your approach, it would make a disaster to all other items inside your column.
![[Quick & Easy] Overlapping Columns in Elementor](http://i.ytimg.com/vi/HbOoos5_gKg/mqdefault.jpg)
![[Quick & Easy] Overlapping Columns in Elementor](/img/tr.png)
This is incorrect. Column Gap is the space between the element or widget and the edge of the column (the gray dotted line). When you adjust the drop down Column Gap setting, nothing changes between the columns and the sections. The change will happen in the space between your spacer widget and the column dotted line. I really appreciate this video because it showed me how to set up the experiment, but after a while, I realized it wasn't changing the space between columns, but it was changing the space between the widget and the column. Thanks!
I found a way to do it. I added empty columns, resized them to adjust the space I wanted in between,and that was it.
@@ahmuyndong786 This helped me so much thank you
Perfect. Answered my problem! Love that this video is jsimply "on topic" with no "small" talk self-marketing speak.
Glad it was helpful!
Thank you. I needed this tonight. I was pulling my hair out 👍🏽
You are so welcome :)
Cheers!
Lyle
Something so simple, and yet I spent way too long trying to figure out why I couldn't adjust the column gaps. Thank you so much for sharing this great tip!
You're welcome! ...it's not overly intuitive :)
Cheers!
Lyle
You have no idea how grateful i am for this! I was going nuts trying to fix this :-)
Hi Catalina,
Good to hear that it helped you! :)
Cheers!
Lyle
They're not equally spaced though. If you measure the green, blue and orange sections, they are: 330px / 330px / 320px - The margin bit at the end where you de-linked and set to 0 eats in to the last column which does not have its value to to 0.
Exactly what I was looking for. Thanks!
You're welcome, Richard.
Cheers!
Lyle
Why don't I see the flyout menu that's visible in your video and many other videos? There is no flyout with my Elementor Pro. Also, any idea why no gaps appear between multi-column sections by default in Elementor? Is there not a simpler way to apply a gap to all columns without having to manually add a padding to each column? When I add a gap it does nothing. I'd think this would be simpler.
Hi graphicartdude,
Not too sure what you are referring to as the "flyout menu". Bear in mind that this video is rather dated and is using an older version of Elementor so functionality has probably changed since it's creation.
If you have not done so already, perhaps take a look at the updated version of the Column Gap that uses a more recent version of Elementor: snifflevalve.com/elementor-tutorials/elementor-column-gap-explained/
Cheers!
Lyle
Hi Lyle, so I am having exactly this issue with a three column element. I'm using the free version of Elementor, there does not seem to be a column gap field to adjust. Is there a way to do it with the free version?
Hi Lauren,
Check out the updated version on the column gap here: ua-cam.com/video/xwjmZ16ZVKc/v-deo.html
Cheers!
Lyle
Thanks a lot sir, God Bless you
You are most welcome.
By doing this like in my case I make the content area in negative value which removes the space between the header and content but on mobile, the hamburger was unclickable because the content overlays it.
Sir this helps a lot, thank you very much.
Hi Bryan,
You're welcome and good to hear that it helped :)
Cheers!
Lyle
My approach: For example, if you have two blocks and you want to set the "gap" between them, set margin-right to whatever value you want to put for one object one in Desktop mode, then margin-right equal 0 for tablet and mobile. Then for object two, do the same but with margin-left.
It worked fine for me thank you
You're welcome :)
Elementor's approach to spacing is such a headache. It changes in the tablet and mobile views requiring constant tinkering. Anyone know how to add more white space to all Elementor page content without having to adjust each section? In tablet and mobile view the content shows nearly touching the edge of the screen. I can't find any answer to this. All that appears in forums and Google are how to add white space. Thanks.
You are right. For me, I'm looking for a way to finish the white space that has been added automatically by the 'container' in Elementor. Cant find anyway around it
Sumbal Tasawwar Yeah it’s a pain. Good to know I’m not the only one. Another issue I experience is when I hide sections for mobile... it prevents me from being able to scroll to the top of the preview to make further edits.
thanks so much. I use elementor update 2019 and i had a difficult for the column gap. I made it.
You're welcome :)
Good to hear you got it made.
Cheers!
Lyle
But when i m using spacer , no any other widget will be added
I have wayyyyyyyyyyyyyyyy too much white space
from the HOME and your three colored boxes you made
how do I fix that
Hi John,
Your best bet would be to post this in the Elementor Facebook group where you can show a pic and post a URL so that I and others can take a look.
Cheers!
Lyle
Column spacing basically doesn’t work in Elementor. All it does is add a hidden padding to the columns, that’s why you have to add the margins yourself if you want a background, or if you want your columns to line up on the far left and far right with the rest of the pages content, just set the column spacing to none and do it yourself. Shame, it’s a simple feature that works perfectly in thrive architect. Also, don’t forget to take away those uneven margins in the mobile versions otherwise your columns won’t line up when stacked vertically on a mobile device. It’s a lot of work for something that should be a simple px input box
Hi Alan,
Thanks for the info. Perhaps they will address this in upcoming releases.
Cheers!
Lyle
thank you!
You're welcome!
Its useful i got the right thing i want!!
Thank u........
You're welcome :)
Cheers!
Lyle
Right column is bigger though, and that's not good.
You have to realize that this vid was for a very old version of Elementor and does not apply to today's version.
Cheers!
Lyle
@@SniffleValve Columns still work the same way though, so it is still the wrong solution
hahahahah...
Sir what an awesome thumbnail. love that
Thanks 😅 Glad you like it!
Cheers!
Lyle
nice trick!
Thanks!
Cheers!
Lyle
thx
You're welcome, Naseem :)
Cheers!
Lyle
this is not column gap adjustment. You are modifying padding and margins which can be the case, but does not apply if there is text inside and you corrected responsiveness for all the rest of screen types. Using your approach, it would make a disaster to all other items inside your column.
I got a headache watching this with slow motion instructions.