Prev & Next Post Arrow Issue

Try this:

/* make pagination nav a 2 col grid */
.site-main .post-navigation {
    margin-top: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
/* align and position the > icon */
.post-navigation .nav-previous,
.post-navigation .nav-next {
    display: flex;
    column-gap: 10px;
}
.post-navigation .nav-next {
    flex-direction: row-reverse;
}
.entry-meta #nav-below .gp-icon {
    display: block;
    margin-right: 0;
    align-self: flex-start;
}
/* keep link to one line and add elipsis */
.post-navigation a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* add the previous & next pseudo text to the links */
.post-navigation .nav-previous a:before,
.post-navigation .nav-next a:before {
    content: "Previous Article";
    display: block;
    font-size: 14px;
    line-height: 1.5;
    font-weight: bold;	
    text-transform: uppercase;
    color: #000;
}
.post-navigation .nav-next a:before {
    content: "Next Article";
}

/* hide the link text on mobile adust the max-width */
@media(max-width: 600px) {
    .post-navigation a {
        font-size: 0;
    }
}

It adds some gap into the 2 columns
Makes it so the links are max one line with ellipsis
And i reduced the mobile breakpoint to 600px where the links disappear.

The NEXT ARTICLE heading is still not aligned with the > in desktop view but otherwise looks spot on.

In tablet view it is the same. I do like how the post title now uses ellipsis though.

Mobile view seems to apply ellipsis when it doesn’t need to. See below:

I’ve been juggling the CSS around and seeing what sticks and I think I may have sorted out the last few niggles.

Firstly, I increased the test post’s title to a stupidly long one to make sure desktop view would fail gracefully.

I didn’t change much but one of the edits I made was to remove the elipsis section. Weirdly the post titles are now being truncated with … at the end but the PREVIOUS ARTICLE and NEXT ARTICLE are showing correctly without the dots (…)?!

I thought elipsis shortened any text that didn’t fit within it’s specified location/wrapper, and then appended three dots (…) to show it had been shortened? Seems I may not fully understand what is going on ??

*I cleared the cache so it’s not something still hanging about there.

Eventually I also seem to have moved the NEXT ARTICLE over to the right where I wanted it too.

Looks like this is desktop view mode:

in tablet view:

and in mobile view:

The PREVIOUS ARTICLE and NEXT ARTICLE links are still working using your earlier sorcery too so that’s a bonus!

Would you mind casting your eye over the current CSS (included below) and make sure its compliant and not just a clash/fluke typo causing an unexpected miracle?

/* make pagination nav a 2 col grid */
.site-main .post-navigation {
    margin-top: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* align and position the > icon */
.post-navigation .nav-previous,
.post-navigation .nav-next {
    display: flex;
    column-gap: 10px;
}
.post-navigation .nav-next {
    flex-direction: row-reverse;
		text-align: right;
}
.entry-meta #nav-below .gp-icon {
    display: block;
    margin-right: 0;
    align-self: flex-start;
}

/* keep link to one line and add elipsis */
.post-navigation a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* add the previous & next pseudo text to the links */
.post-navigation .nav-previous a:before,
.post-navigation .nav-next a:before {
    content: "Previous Article";
    display: block;
    font-size: 14px;
    line-height: 1.5;
    font-weight: bold;	
    text-transform: uppercase;
    color: #000;
}
.post-navigation .nav-next a:before {
    content: "Next Article";
		text-align: right;
}

/* hide the link text on mobile adust the max-width */
@media(max-width: 600px) {
    .post-navigation a {
        font-size: 0;
    }
}

Could you also pass on my warmest regards to @ying for her help regarding this too. You have both been a massive help and the support offered is second to none – and for a user of the free GeneratePress theme too!

I am getting closer and closer to buying the Pro version along with GenerateBlocks.

Again, thank you so very much.

Bah! I can no longer edit my previous post to make a correction. That would be @yingscarlett for Ying.

Can a moderator please make the change to the aforementioned post, then delete this post?

Thanks

Nope, found an issue (only one honest). It seems I need to align the content of the right grid (lfr) to the right because if there is no previous post, either the right hand side moves to the middle, or more probable, the left one collapses.

I have tried searching around for how to align the contents of the second 1ft of grid-template-columns: 1fr 1fr; but have come up empty.

Any ideas?

• This reply was modified 7 months, 3 weeks ago by Bri.

Just a thought, could .post-navigation .nav-next:not(:empty):after and .post-navigation .nav-previous:not(:empty):before be of any use here?

Your warm regards are well received ??

Sorry for the late reply, try adding this CSS to set the nav-next to the 2nd column:

.nav-next {
    grid-column: 2;
}

Hi Ying,

Glad you got my message.

I’d already worked out to add the following:

.post-navigation .nav-next {
    flex-direction: row-reverse;
		text-align: right;
		grid-row: 1;
		grid-column: 2;
}

This fixes everything except for display: -webkit-box; from the following:

.post-navigation a {
		display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

This is affecting mobile view by adding elipsis to the < PREVIOUS ARTICLE and NEXT ARTICLE > making them look like this:

I can’t remove it though or it isn’t applied to the post titles in tablet or desktop views.

I tried changing the grid-gap from 20px all the way down to 0px but it wasn’t enough to give the text the room it needed.

I then tried to make the font slightly smaller for .nav-previous and .nav-next but the …’s only go away when I get down to 11px which looks tiny ??

Aside from renaming the above to something shorter so that I can increase the font back to 14px, I am out of ideas.

What do you think, is there anything else I can do?

*SHRUGS*

I think I will have to admit defeat and go with the following (even though I dislike having the abbreviation there):

Thank you again to both yourself and David ( @diggeddy ). Fantastic support every single time.

Take care

Quick suggestion, maybe it might make more sense to adjust the following in to show the right arrow to be after the post link in post-meta.php in a future update instead of manipulating the position with CSS given the sheer amount of support posts I came across during my searching.

generatepress/inc/structure/post-meta.php at master · tomusborne/generatepress (github.com)

$post_navigation_args = apply_filters(
	'generate_post_navigation_args',
	array(
		'previous_format' => '<div class="nav-previous">' . generate_get_svg_icon( 'arrow-left' ) . '<span class="prev">%link</span></div>',
		'next_format' => '<div class="nav-next">' . generate_get_svg_icon( 'arrow-right' ) . '<span class="next">%link</span></div>',
		'link' => '%title',
		'in_same_term' => apply_filters( 'generate_category_post_navigation', false ),
		'excluded_terms' => '',
		'taxonomy' => 'category',
	)
);

• This reply was modified 7 months, 3 weeks ago by Bri.

Last message on this subject I promise.

Could you please take the following CSS and add an?@media?rule?for?mobile?that will hide?PREVIOUS ARTICLE?and?NEXT?ARTICLE?headers and then?show?PREVIOUS?and?NEXT?in?their?place? (when on mobile only so that it returns to PREVIOUS ARTICLE and NEXT ARTICAL for tablet and desktop views).

This would totally fix the issue with having to rename/lower the font size to fit in what I want.

/* make pagination nav a 2 col grid */
.site-main .post-navigation {
    margin-top: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
}

/* align and position the > icon */
.post-navigation .nav-previous,
.post-navigation .nav-next {
    display: flex;
    column-gap: 0px;
}
.post-navigation .nav-next {
    flex-direction: row-reverse;
		text-align: right;
		grid-row: 1;
		grid-column: 2;
}
.entry-meta #nav-below .gp-icon {
    display: block;
    margin-right: 0;
    align-self: flex-start;
}

/* keep link to one line and add elipsis */
.post-navigation a {
		display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* add the previous & next pseudo text to the links */
.post-navigation .nav-previous a:before,
.post-navigation .nav-next a:before {
    content: "Prev Article";
    display: block;
    font-size: 14px;
    line-height: 1.5;
    font-weight: bold;	
    text-transform: uppercase;
    color: #000;
}
.post-navigation .nav-next a:before {
    content: "Next Article";
		text-align: right;
}

/* hide the link text on mobile adust the max-width */
@media(max-width: 600px) {
    .post-navigation a {
        font-size: 0;
    }
}

I have it working whereby it replaces the < PREVIOUS ARTICLE and NEXT ARTICLE > when in mobile view with anything I like (currently <PREV ARTICLE).

Although I have learnt a lot throughout the process of this support post, I realise I might be handling this in the totally wrong way (especially after reading a LOT on grids replacing @media queries). With this in mind, could someone please cast their eyes over the current CSS and offer advice if this is the best way to do this/if I am following best practice?

/* make pagination nav a 2 col grid */
.site-main .post-navigation {
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 20px;
}

/* align and position the > icon */
.post-navigation .nav-previous,
.post-navigation .nav-next {
    display: flex;
    column-gap: 0px;
}
.post-navigation .nav-next {
    flex-direction: row-reverse;
		text-align: right;
		grid-row: 1;
		grid-column: 2;
}
.entry-meta #nav-below .gp-icon {
    display: block;
    margin-right: 0;
    align-self: flex-start;
}

/* keep link to one line and add elipsis */
.post-navigation a {
		display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* add the previous & next pseudo text to the links */
@media(min-width: 601px) {
.post-navigation .nav-previous a:before,
.post-navigation .nav-next a:before {
    content: " Previous Article";
    display: block;
    font-size: 14px;
    line-height: 1.5;
    font-weight: bold;	
    text-transform: uppercase;
    color: #000;
}
.post-navigation .nav-next a:before {
    content: "Next Article ";
		text-align: right;
}
}

/* hide the link text on mobile */
@media(max-width: 600px) {
    .post-navigation a {
        font-size: 0;
    }

		.post-navigation .nav-previous a:before, .nav-next a:before {
    		content: " Prev Article";
    		display: block;
    		font-size: 14px;
    		line-height: 1.5;
    		font-weight: bold;	
    		text-transform: uppercase;
    		color: #000;
		}

		.post-navigation .nav-next a:before 		{
    		content: "Next Article ";
				text-align: right;
		}
}

You can reduce duplicity in the /* add the previous & next pseudo text to the links */ rules. For example:

/* add the previous & next pseudo text to the links */
.post-navigation .nav-previous a:before,
.post-navigation .nav-next a:before {
    content: " Previous Article";
    display: block;
    font-size: 14px;
    line-height: 1.5;
    font-weight: bold;	
    text-transform: uppercase;
    color: #000;
}
.post-navigation .nav-next a:before {
    content: "Next Article ";
    text-align: right;
}
/* hide the link text on mobile */
@media(max-width: 600px) {
    .post-navigation a {
        font-size: 0;
    }
    .post-navigation .nav-previous a:before, .nav-next a:before {
        content: " Prev Article";
    }

    .post-navigation .nav-next a:before 		{
        content: "Next Article ";
    }
}

The first rule gets loaded on all devices sizes. The second rule at a max width of 600px simply changes the content property.

Regarding Grids over Media queries yes its possible to do it without a media query, but there is absolutely no point as it would probably be more convoluted then the method you have here.