Topic: Read More button same height

omp-generatepress
December 29, 2024 at 8:18 am
Hi.

Right now I develop on localhost.
I have the following function to trim the excerpt and to rename the “Read More” button:
```
add_filter( 'wp_trim_excerpt', function( $excerpt ) {
	if ( is_home() || is_archive() ) {
        return sprintf( '%1$s <p class="read-more-button-container"><a class="button" href="%2$s">%3$s</a></p>',
            $excerpt,
            get_permalink(),
            __( 'Visit Gallery', 'generatepress' )
        );
    }
    return $excerpt;
});
```
The only problem is that not all of the buttons are on the same height, depending on the length of the excerpt.

How can I ensure that the buttons are all at the same height? Do I have to add some extra CSS to the class=“entry-summary” or to the class=”read-more-button-container”?

Ying

December 29, 2024 at 11:57 am

Hi there,

It requires CSS.

Try this CSS:

:is(.blog, .archive) .inside-article, .entry-summary {
    display: flex;
    flex-direction: column;
}

:is(.blog, .archive) .entry-summary {
    flex-grow: 1;
}

:is(.blog, .archive) p.read-more-container {
    margin-top: auto;
}

if it doesn’t work, I would need to see your site to know the exact the structure and write CSS based on that.

Let me know 🙂

omp-generatepress
December 30, 2024 at 2:39 am

No, that CSS code doesn´t work. It has no effect on the entry-summary container.
Right now I can´t show you my site, because I develop on localhost.
Ying
December 30, 2024 at 11:06 am

Let me know when it’s online.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

Read More button same height