Columns elements not lining up

Hey dreyerjm,

Thank you for the inquiry.

Try adding this code in the Quick CSS field.

#top .av-equal-height-column .avia-button-wrap {
    position: absolute;
    bottom: 0;
    width: 100%;
}

#top .av-equal-height-column {
    padding-bottom: 50px;
}

You can also replace av-equal-height-column with a custom css class name if you want this applied only to specific columns.

— https://kriesi.at/documentation/enfold/add-custom-css/#enable-custom-css-class-name-support

Result:

Best regards,
Ismael

Hi,
When I check your page I see that your are using equal height columns, so all three columns will adjust to be the same height.
The problem is that in each of the three columns you have an HR element between the text element and the button, and all three are set to different heights.
30px 58px 2px

Please check an adjust so all are the same height, then the buttons and images will be correct.

Best regards,
Mike

Hi,

We couldn’t find a “programcolumn” column anywhere in the elements, so we used the default element ID instead. Please remove the previous css code and use the following code instead.

#top .flex_column_table.av-1bilfvb-acaaf518a56045ca4bfe6b9c9a40283f.sc-av_one_fourth.av-equal-height-column-flextable .avia-button-wrap {
    position: absolute;
    bottom: 0;
    width: 100%;
}

#top .flex_column_table.av-1bilfvb-acaaf518a56045ca4bfe6b9c9a40283f.sc-av_one_fourth.av-equal-height-column-flextable .flex_column {
    padding-bottom: 50px;
}

Best regards,
Ismael

Hi,

Kindly edit the Color Section that contains the columns and assign it the class name “av-program-columns”. We have updated one of the pages (see private field) with the new class name and applied the following css in the Quick CSS field.

#top .av-program-columns .flex_column_table.av-equal-height-column-flextable .avia-button-wrap {
    position: absolute;
    bottom: 0;
    width: 100%;
}

#top .av-program-columns .flex_column_table.av-equal-height-column-flextable .flex_column {
    padding-bottom: 50px;
}

You can do the same for the remaining pages.

Best regards,
Ismael

Hi,
On your /find-food/ page your column Vertical Alignment was set to middle, I changed it to top

The reason is that the first column has more text which sets the height for the other two columns, but with the Vertical Alignment set to middle the other two columns center the content. In the screenshot notice how the special heading titles and images do not line up:

After making the change everything lines up:

I made this change to the other pages that you listed above and the all work now.
Keep Ismael’s CSS above as it forces the buttons to the bottom of the columns without using extra HR elements.

Best regards,
Mike