Read button position alignment anomaly

Hi,

Can you link us to the site you're working on? So we could check for any issues that might cause this.

You can add the site details on the Private Information text field. Thank you.

Hi Elvin,

The site's used internally so making it externally accessible will be a real challenge. Are you able to test it on a demo site?

The site’s used internally so making it externally accessible will be a real challenge. Are you able to test it on a demo site?

Its going to be difficult to replicate the issue if I don't exactly know how the site in question is structured.

We ask for the site to check the DOM structure for any mismatch between the CSS selector and the styling being applied.

Viewing the DOM structure also gives us an idea if the page is being changed by a plugin or PHP snippet. If we can't see this things, we're basically going in blind.

Can you give more details of the site's setup? Example: Customizer blog settings, site library template used, PHP snippets related to editing of any blog/archive and/or search results.

Happy to provide the details in the absence of an externally facing site.

1. The library is Dev.
2. The blog settings are - https://imgur.com/a/DtKJvQa
3. The additional CSS include the following;

.generate-columns-container,.site-content{justify-content:center;}.post-image-above-header .no-featured-image-padding .inside-article .featured-image{margin:10px !important;}

.read-more-container{padding:40px 0 0 0;}.b-read-more{text-align:center;background-color:#0366d6;color:#ffffff;padding:15px;transition:.2s background-color ease-in-out,.2s color ease-in-out,.2s border-color ease-in-out,.2s opacity ease-in-out,.2s box-shadow ease-in-out;}.b-read-more:hover{box-shadow:0 0 2em rgba(0,0,0,.1),inset 0 0 1em rgba(0,0,0,.1);background-color:#222222;color:#ffffff;}.b-read-more:focus{box-shadow:0 0 2em rgba(0,0,0,.1),inset 0 0 1em rgba(0,0,0,.1);background-color:#222222;color:#ffffff;}

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

The custom PHP is;

function cu_excerpt( $excerpt ) {

        $more = ' ...<p class="read-more-container"><strong><a href="' . get_permalink() .  '" class="b-read-more">Read More<span class="screen-reader-text">' . get_the_title() . '</span></a></strong></p>';
$excerpt = get_the_content();
       $excerpt = wp_trim_words($excerpt, 15, $more );
        return $excerpt;
}

add_filter( 'the_excerpt', 'cu_excerpt', 10, 1 );

Ah right.

the PHP part is the issue.

Use this instead.

function tu_read_more($output) {
	$output = sprintf('...<p class="read-more-container"><strong><a title="%1$s" class="read-more" href="%2$s" aria-label="%4$s">%3$s<span class="screen-reader-text">%3$s</span></a></strong></p>',
		the_title_attribute( 'echo=0' ),
		esc_url( get_permalink( get_the_ID() ) ),
		__( 'Read more', 'generatepress' ),
		sprintf(
	       /* translators: Aria-label describing the read more button */
	       _x( 'More on %s', 'more on post title', 'generatepress' ),
	       the_title_attribute( 'echo=0' )
		)
		);
	return $output;
}

add_filter( 'generate_excerpt_more_output', 'tu_read_more', 10, 1 );
add_filter( 'generate_content_more_link_output', 'tu_read_more', 10, 1 );

generate_excerpt_more_output is used by the search page. generate_content_more_link_output is used by the blog & archive pages.

Just change the values within this code to your preference. :)

More about generate_excerpt_more_output.
https://docs.generatepress.com/article/generate_excerpt_more_output/

More about generate_content_more_link_output
https://docs.generatepress.com/article/generate_content_more_link_output/

Thanks Elvin. The code you suggested generates a critical parsing error.

Strange.

Try this instead. I've changed a few things.

function tu_read_more($output) {
	$output = sprintf('...<p class="read-more-container"><strong><a title="%1$s" class="b-read-more" href="%2$s" aria-label="%4$s">Read More<span class="screen-reader-text">%3$s</span></a></strong></p>',
		the_title_attribute( 'echo=0' ),
		esc_url( get_permalink( get_the_ID() ) ),
		__( 'Read more', 'generatepress' ),
		sprintf(
	       /* translators: Aria-label describing the read more button */
	       _x( 'More on %s', 'more on post title', 'generatepress' ),
	       the_title_attribute( 'echo=0' )
		)
		);
	return $output;
}

add_filter( 'generate_excerpt_more_output', 'tu_read_more', 10, 1 );
add_filter( 'generate_content_more_link_output', 'tu_read_more', 10, 1 );

See this particular code + your CSS in action on this demo site:
Dev DEMO BLOG
and Dev DEMO SEARCH

The main problem was, the initial PHP snippet you've added doesn't seem to be applying to the blog and archive pages.

Thanks Elvin. It parses although there is no difference to the position of the read button in the blog. See https://imgur.com/a/Xv5seFm.

The former is when it appears in the search results page and the latter when on the blog page.

In inspecting the output, it seems that the div.inside-article element has the dimensions of 477 x 539 when accessing the blog page.

The search results however has the dimensions of 457 x 562.

Where are these being inherited from?

Where are these being inherited from?

In general, div.inside-article and its parent container article.post gets its height from its content.

So the "562" or height value your seeing is most likely from the total height of the article's contents(featured image, excerpt, read more button) + padding/margin.

And since these columns are set to have equal height of its siblings, the columns with lesser content (for posts using entry-summary rather than entry-content) will still have the same height.

As for the "457" or the width, its the width percentage of the container minus padding+margin values. So if you have 4 columns, the calculation is around ( (100% of container / 4) - (padding + margin) ).

Thanks Elvin. As there are no paddings or margins other than those shared in this post and given that the posts in the search result and blog are the same, it isn't clear why the read more container isn't aligning for the both of them. Any other suggestions?

Hi Elvin,

We found a solution (code posted below) that works for both the search results and blog.

Is there a particular reason why the last child isn't suggested in any of the answers?

.one-container.archive .post:not(:last-child), .one-container.blog .post:not(:last-child) {padding-bottom:0px !important;}.generate-columns .inside-article,.entry-summary{display:flex;flex-direction:column;flex:1}p.read-more-container{margin-top:auto}

Glad you found a solution - we use :last-child in our CSS sometimes when we don't want too much space after the last item, especially when using One Container.

It's hard to tell exactly what was going on here without being able to inspect the site, but glad it's all working now :)

Thanks Tom. It's a challenge when a site is used internally. The help from the GeneratePress is team has been awesome although flying blind.

Would it be possible to include the solution as part of future releases? Users (assumption) are likely to want aligned buttons (which also leads to the question as to how these are announced or introduced so that customizations can be rolled back or removed unless you have a tool you can recommend that picks up duplicates?)

I would need to see the issue in order to determine that. Is this something you can reproduce on a live environment so I can take a quick look?