May I ask how can I align the excerpt and button in wordpress elementor blog grid please?

Question

Since my blog posts Title and excerpt have different length and the excerpt and read more buttons are not aligned to the top of the sentence. May I ask how can I align the excerpt and button in blog grid please? We would like to see if all the excerpt and buttons could be start on the same row. Thank you in advance.

I have tried to set a the minimum box height for the post grid now but no luck to align the excerpt and buttons

Link: http://abc7452.sg-host.com/news/

Answer 1

you could try by setting a min-height for the title and excerpt. Try using this code, you can put it in appearance > customize > additional css

.td-recent-post-el-widget .post-title {
min-height: min-height: 120px;
}
.td-post-excerpt {
min-height: min-height: 144px;
}

You want to apply this style only in this blog grid give it and ID in the widget's advanced settings. The code then will look like this:

#id .td-recent-post-el-widget .post-title {
min-height: min-height: 120px;
}
#id .td-post-excerpt {
min-height: min-height: 144px;
}

Hope it helps.

Answer 2

I have tried with the below code and seems to work. But still no luck to align the start of the excerpt horizontal line

/* News Page Blog Post Height  */
.elementor-2244 .elementor-element.elementor-element-9cbc062 .td-recent-post-el-widget .td-single-post-content {
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
    height: 500px;
    display: flex;
    flex-direction: column;
}

.td-recent-post-el-widget .td-post-read-more {
    margin-top: auto;
}

.td-post-excerpt{
    margin-top: auto;
}

/* Home Page Blog Post Height  */

.page-id-138 .td-recent-post-el-widget .td-single-post-content {
    padding: 30px 35px 40px;
    box-shadow: 0 5px 16px rgba(221,221,221,.5);
    background-color: #fff;
    border-radius: 0 0 5px 5px;
    height: 300px!important;
    display: flex;
    flex-direction: column;
}

Answer 3

create a custom class in your main css file. I like to have a "helper.css" file that holds all my helper classes. Then anytime you have something that needs to go to the bottom of the container, you can add that class.

.margin-top--auto{
    margin-top:auto;
}

Some containers will need grow set to 1 to fill the parent container.