display prev/next post link within one line

[Joyce]

Hi Team,

This ticket is no 2 in https://generatepress.com/forums/topic/child-theme-12/, thanks.

/inc/structure/post-meta.php
– need to display prev/next post link within one line, so I added css class (prev-post-link,next-post-link)

<'previous_format' => '<div class="nav-previous prev-post-link">' . generate_get_svg_icon( 'arrow-left' ) . '<span class="prev" title="' . esc_attr__( 'Previous', 'generatepress' ) . '">%link</span></div>'
<'next_format' => '<div class="nav-next next-post-link">' . '<span class="next" title="' . esc_attr__( 'Next', 'generatepress' ) . '">%link</span>' . generate_get_svg_icon( 'arrow-right' ) . '</div>'
next-post-link {
	float: right;
	font-weight: bold;
}
.prev-post-link {
	display: inline;  //div do not break into new line
	font-weight: bold;
}

[Elvin]

Hi,

Can you link us to the site in question so we could take a closer look?

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

A wise man once said:
"Have you cleared your cache?"

[Joyce]

Sorry for my late reply, pls refer to https://prnt.sc/v0zfom

[David]

Hi there,

can you provide a link to your site where we can see the issue?

You can share a link privately by adding it to the Private Information box.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Joyce]

Thanks David, pls see the prev/next link above comments section, thanks

[David]

I am getting Access Denied when visiting that link

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Joyce]

Sorry David can you please try again.

[David]

Try adding this CSS:

@media(min-width: 769px) {
    .post-navigation,
    .post-navigation > div  {
        display: flex;
    }
    .post-navigation > div {
        flex: 0 0 45%;
        margin-top: 1em;
    }
    .post-navigation > div:last-child {
        margin-left: auto;
        flex-direction: row-reverse;
    }
    .post-navigation .gp-icon {
        align-self: flex-start;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Joyce]

Thanks David, it works file, you are a legend!

[David]

Glad to hear that!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts