Skip to content

Instantly share code, notes, and snippets.

@marklchaves
Created October 16, 2019 23:02
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save marklchaves/54d24e753b8df2df6d8fafbedef32e72 to your computer and use it in GitHub Desktop.
Save marklchaves/54d24e753b8df2df6d8fafbedef32e72 to your computer and use it in GitHub Desktop.
CSS Only Solution to Equal Height Columns in Avada by ThemeFusion (two plain columns with buttons)
/* For Avada by ThemeFusion */
/* The equal height problem is only an issue for larger devices. */
@media screen and (min-width: 1024px) {
/* Make the column content equal height. */
.your-classname-here .fusion-column-wrapper {
height: 440px !important; /* Adjust for your content. */
}
/* These CSS selectors depend on what Avada buttons you use. Note the button-2 class--change as needed. */
.fusion-button.button-flat.button-small.button-default.button-2.fusion-button-default-span.fusion-button-default-type {
position: absolute;
bottom: 0;
transform: translate(-50%, -50%);
}
/* These CSS selectors depend on what Avada buttons you use. Note the button-3 class--change as needed. */
.fusion-button.button-flat.button-small.button-default.button-3.fusion-button-default-span.fusion-button-default-type {
position: absolute;
bottom: 0; /* Ground the button to the bottom. Adjust as needed. */
transform: translate(-50%, -50%); /* Center justify the button. */
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment