Question 1790 in Wordpress Question posted in
The official Wordpress documentation can be found here.

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

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/

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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;
}

    screenshot


  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search