[Resolved] Can’t get buttons to stick to bottom in query loop + button width

And another related question: I’m assuming that I still need the custom CSS in order to get the category page buttons to align on the bottom of the posts? (unless I want to design my own category page, that is…)

https://avenueroadsafetycoalition.ca/category/news/

The CSS is working fine on the first category page, but not on the subsequent ones. I seem to have a bunch of CSS in there and if I try to take any of it out, the first page doesn’t work either.

Tried this and it doesn’t work either:

.inside-article .entry-summary {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.gb-inside-container .read-more-button-container:last-child {
  margin-top: auto;
}

Hi Ying – I’ve disabled all but the GPP plugin (including GB + GBP) – but left Code Snippets active since deactivating that would turn off the buttons.

It’s got the following snippet, (which I got here):

add_filter( 'wp_trim_excerpt', 'tu_excerpt_metabox_more' );
function tu_excerpt_metabox_more( $excerpt ) {
    $output = $excerpt;

    if ( has_excerpt() ) {
        if(is_archive() || is_home()) {
            $output = sprintf( '%1$s <p class="read-more-button-container"><a class="button" href="%2$s">%3$s</a></p>',
                $excerpt,
                get_permalink(),
                __( 'Read more', 'generatepress' )
            );
        }
    }
	
    return $output;
}

I don’t have any other code snippets except for one that adds another image size (and it’s all of two lines and nothing to do with this).

I added the extra bit of CSS, so now the complete bit for keeping the buttons aligned looks like this. Not sure if there is anything that should be simplified – anything I’ve tried has made it stop working.

.gb-inside-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.gb-inside-container > *:last-child {
    margin-top: auto;
}
.generate-columns .inside-article {
    display: flex;
    flex-direction: column;
	height: 100%;
}

.generate-columns .inside-article .entry-summary {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.read-more-button-container, .read-more-container {
    margin-top: auto;
}

I’d still like to get to the bottom of why the second page button container acquires a class name. It does seem particular to THIS site – another site, on which I just enabled the updated layout and has a similar structure does not have any issues with the read more buttons on the archive pages after the first one. ( https://fontra.com/news/page/2/ – works fine). It has the same code snippet and same css for button location, other than the two different button classes, of course.

David, as noted in the post about having turned off the plugins, I’m using Code Snippets (the plugin) and if I change the class in the snippet, then will it still work on both the first and the subsequent pages of the archive pages? The mystery here, is why it’s got two different classes on the archive pages at all. (I don’t think the first archive page is identified as “home” in this case, is it? Anyway, that’s an “or” statement that ignores the is_home if the is_archive bit is true, so this wouldn’t explain why the archive pages do not have the class they should have on the subsequent pages.)

Good question. I think I got the code snippet here in response to this post: https://generatepress.com/forums/topic/read-more-button-on-archives/

So went back and added the more general code snippet (turned off the one with the extra bits about archive etc.) – it works. So then I tried to edit out the .read-more-container class from the CSS…and it then doesn’t work, indicating that this class is still there on the archive pages 2 and up.

Note – I flushed caches (during and after adjustments) just in case anything was sticking around that shouldn’t have. No joy.

And of course – trying the same thing at https://fontra.com (swapping out the code snippet for the simpler, broader one) worked just fine – and it just has the one .read-more-button-container class in the CSS.