Align Row element to bottom of column

Support
#1

Good day Support,

I have set up the following CSS styling to enable me to align certain elements to the bottom of columns:

.equal-height {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-line-pack: stretch;
      align-content: stretch;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.x-container:before {
  content: normal;
}

@media {
    .bottom-align {
        margin-bottom: 0;
        position: absolute;
        bottom: 0;
        left: 0;
    }
}

It works perfectly in most cases, however, I have an instance where I’ve used a “row” element to place a button and line element next to each other, and when applying the “bottom-align” class to this “row” element, it aligns the row to the bottom of the column, but reduces its width (as shown below).

Why does it reduce the row element’s width and how do I prevent it from doing that? Or, alternatively, is there a better way of aligning the row element to the bottom of it’s column?

#2

Hi @Glasseye,

Thank you for writing in, on the latest version of PRO and X, the Column has now a native Flexbox Layout option.

Remove your custom CSS and enable this Flexbox Layout option and apply a top margin auto to the element that you want to be at the bottom of the column. Use the Horizontal Align and Vertical Align options to position things in the Column.

Pro 3.0.0, X 7.0.0, Cornerstone 4.0.0
The Row: New and Improved

Cheers!

#3

Hi @friech,

Thanks for the advice on the new Flexbox setting for columns, it’s an awesome new feature and works great to get the headings to align to the bottom of their column:

But, when using this new Flexbox setting on the parent column of the “row” element containing the button and line, it still reduces the width and aligns it to the centre of the column even when the column’s Flexbox horizontal alignment is set to “Start”:

Any ideas on how to fix this, or perhaps create the button and line differently?

Regards,

#4

Hi @Glasseye,

In that case, please provide us the page URL and login credentials in a secure note so we can take a closer look.

Thanks,

#5

Hi @Glasseye,

Thanks for providing the details.

To fix the layout issue, simply set the row element that contains the button and line to 100%:

then the result should be:

Hope this helps.

#6

Yes! That’s perfect, thank you so very much :grinning:

Themeco support as great as ever!

#7

We are happy to help,

Cheers!

#8

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.