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

[paddyd]

Ok – so I’ve got the new GB installed and cannot for the life of me figure out how to get the read more buttons to align along the bottom. The old code I’ve used in the past doesn’t work – and I thought there was a way to do it from the controls, but nothing I’ve tried has worked and there are no updated, detailed KB articles on the buttons. I’ve tried watching videos – but haven’t found anything on this particular bit so far. So how do I do this?

The page: https://secondseasonfarm.ca/

I have three sample query blocks in there – the original (3 columns, 3 posts) and two copied from the pattern library to try to understand what the *heck* was going on. The original (3 column one), no matter what I do, has a button that is full width. So I added the button container back on it.

So this is the weird bit: when I add the outer button container…it adds controls that are EXACTLY the same as the controls for the inner button – all of them. There is NO option to fill horizontal space or not – it’s nothing like the old button container used to be. And yet – the THIRD example on my page, which also has a button container and a button, with, I think, the exact same controls set, is NOT full-width.

And the middle query loop has “buttons” (with the old button container settings) and “button” – with the new button settings.

All a little frustrating without any documentation.

[David]

Hi there,

sorry for your frustration, we are working on documentation.

1. If you remove the CSS as it won’t be required.
2. Then you can start with the Query Loop -> Post Template block.
2.1 Set the Layout > Display > Flex
2.2 Set the Flex Direction to Column.
2.3 Remove any empty blocks from the template, currently i can see a couple after the button.
The button has to be the last block in the post.
2.4 With the Button selected:
2.4.1 set its Settings > Sizing > Width to 100%
2.4.2 in Settings > Spacing > Top Margin, type auto

[paddyd]

Thanks, David. So – some strange stuff remains.

Query Loop #1 – buttons are now aligned on the bottom. 100%, however, leaves them the full width of the post, as does REMOVING 100% from the width. So something wonky there. This button block has no button container.

Query Loop #2 – buttons are now aligned on bottom. However, until I removed the button and added it back in, this button had the OLD button container – with only a few settings including whether or not you want the button the full width (no, so not toggled on). I removed it and added a new button with a new button container. Added the margin auto to the container, and as expected it worked. Made the button 100% width (not the button container) and that worked.

Query Loop #3 ended up the same as Query Loop 2. IE: working fine as long as the button had the enclosing button container DIV.

To test this further, I tried it on another site – https://avenueroadsafetycoalition.ca

Exactly the same situation as Query Loop #1 – without the enclosing button container, no joy on the button width.

So if we want NON-full width buttons with GB 1.7, do we actually need a button container block? Or is there some other setting I’ve not tried? (and I’ve tried all sorts of things to see what happens!)

[David]

Sorry I though you wanted the button 100% width.

Ok, select the Post Templates block, and set the Align Items to Start (left).
And remove the buttons width value

[paddyd]

Wonderful – that works! (didn’t think of using the setting in the Post Template block for that. :p) Flex is not for the faint of heart – but it’s definitely added some terrific functionality.

Thank you, as always. I have a boatload of sites using WP Show Posts, which I’m swapping out for query loops, so this is all very helpful. There’s a lot of custom CSS and various snippets I can toss out, now. 😀

[paddyd]

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

[Ying]

Hi there,

I can see your CSS in the customizer > additional CSS, but the .read-more-button-contaienr {margin-top:auto;} doesn’t load on paged archives.

I’m not sure why, can you try disabling all plugins except GP premium to test?

Let me know!

[paddyd]

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

[Ying]

I figured out the button class is read-more-button-container on the first page, but it changes to read-more-container on the paged archive.

Do you have any other PHP code added that may affect the read more button?

You can change this CSS:

.read-more-button-container {
margin-top:auto;
}

to

.read-more-button-container,.read-more-container {
margin-top:auto;
}

It should work for now, but I still don’t understand how the class changed.

[paddyd]

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]

So this code snippet:

https://generatepress.com/forums/topic/cant-get-buttons-to-stick-to-bottom-in-query-loop-button-width/#post-2553510

Are you using a plugin to add that ? Does the plugin affect where the snippet gets applied?

As an interim fix you could change the class="read-more-button-container" in the snippet to class="read-more-container"

[paddyd]

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.)

[David]

Why the need for the is_home() and is_archive template tag conditions.
Are there other places where the read more isn’t required?

[paddyd]

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.

[Ying]

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.

I would think the easiest solution here is to change the read-more-button-container to read-more-container in your PHP code.

[Author]

Posts