Archived topic
Column Spacing and element spacing within columns
5 replies · Started by Tim Zurawski on January 28, 2019
This may be a question for elementor, but spacing on my columns seem to jump all over the place row to row. I do not currently have pro version (just expired). So I am trying to figure out why 3 rows of 4 columns have dissimilar spacing. should custom css be added here, and if so, does anyone have the css?
Also need to space the elements inside each widget. icon, icon heading, text and more button.
Need them to be unified and allow for growth.
http://www.trendstrategics.com
thank you in advance
Hi there,
not seeing this on the front end? 3 rows look well aligned to me. Cleared browser caches?
ah, ok, how about the buttons. How can we align them bottom?
thank you David
If you search on YouTube for: Elementor - aligning elements
You will find one of my old videos (FlintSkin) - which provides some ways to align.
One of the methods is - add this CSS to Additional CSS.
.db-flex-column .elementor-widget-wrap {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}Then in elementor select each column and on the advanced tab add the db-flex-column to the CSS Classes.
David,
How can I combine 2 different css classes to same element
This---
db-grid-column
.db-grid-column .elementor-widget-wrap {
display: grid;
grid-template-rows: 100px 60px 4fr 1fr;
}
And This---
db-flex-column
.db-flex-column .elementor-widget-wrap {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
Thank you
timz
<><
You can't apply the two different grids ie. Flexbox and CSS Grid to the same element. CSS Grid will override Flexbox.
Flexbox is the simpler method of the two for aligning the content.
