How do I place text at the bottom of a 100% color section?

Hey Michael,
Please try this css:

.avia-section.av-minimum-height .container .content {
    vertical-align: bottom;
}

please see the test page linked below.

Best regards,
Mike

Hi,
The middle alignment is the default, so you only need to assign the top & bottom.
So use the custom classes text-bottom & text-top
and this css

.avia-section.av-minimum-height.text-bottom .container .content {
    vertical-align: bottom;
}
.avia-section.av-minimum-height.text-top .container .content {
    vertical-align: top;
}

Best regards,
Mike

Hi,
Thanks for the screenshot, I see that you have added css to the custom class field, please only add the custom class that you want for the element in the field, like this:
text-bottom
or
text-top
note that there is no dot before the class, this is important.
then in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field add the css:

.avia-section.av-minimum-height.text-bottom .container .content {
    vertical-align: bottom;
}
.avia-section.av-minimum-height.text-top .container .content {
    vertical-align: top;
}

the css will only work on the elements with the custom class.

Best regards,
Mike

Hi,
Glad this helped. the inner div .content has a top and bottom 50px padding:

if you want to remove this use this css instead:

.avia-section.av-minimum-height.text-bottom .container .content {
    vertical-align: bottom;
    padding: 0;
}
.avia-section.av-minimum-height.text-top .container .content {
    vertical-align: top;
    padding: 0;
}

the results:

You can add the css to your child theme stylesheet if you wish, unless there is anything else we can help with on this issue, shall we close this then?

Best regards,
Mike