Skip to content

Instantly share code, notes, and snippets.

@diggeddy
Created December 20, 2017 13:48
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save diggeddy/7c2744dbf7c2743d239b5009fc20d4b3 to your computer and use it in GitHub Desktop.
Save diggeddy/7c2744dbf7c2743d239b5009fc20d4b3 to your computer and use it in GitHub Desktop.
A Flex and Grid option for vertically aligning elements within a column
/* Elementor - Auto aligning elements within a column */
/*Option 1 - Flex Container Fix*/
.db-flex-column .elementor-widget-wrap {
height: 100%;
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6, BB7 */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
display: flex; /* NEW, Spec - Firefox, Chrome, Opera */
flex-direction: column;
justify-content: space-between;
}
/*Option 2 - CSS Grid Fix*/
.db-grid-column .elementor-widget-wrap {
display: grid;
grid-template-rows: 1fr 2fr 2fr 1fr;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment