HowTo: Align the last item to the bottom of an Elementor column

Need help with WordPress or Elementor?
I’ve made it easy to schedule a LIVE Zoom Call with me.

Courtesy elementorcodes.com, here’s my current preferred method for aligning the last item in an Elementor column to the bottom of the column:

The following assumes you have Elementor Pro as it utilizes the selector “magic” CSS selector.

First, select the column(s) where you want your last item aligned to the bottom.

Second, add the following to the “Custom CSS” editor under the Advanced tab:

selector > div > div {
        flex-direction: column;
}

selector .elementor-widget-wrap div:last-child {
        margin-top: auto;
}

← Previous post

Next post →

6 Comments

  1. this doesn’t work for elementor with container, any idea how to do it

    • Oh yeah, haven’t tried this yet with the new container setup, but I’d totally think it would be that way. It may be possible to do this just with the settings available to us now in the new container-based widgets. When I get a chance to look at this, I’ll reply back here with an update.

  2. Container : Layout settings > Justify Content > Space Between
    seems to have worked.

  3. No Pro-Version needed. Give an ID to the column and set the ID instead of “selector” in the css above. Works fine.

Leave a Reply

Your email address will not be published. Required fields are marked *