[Resolved] Minor tweak needed for Inline Post Navigation with SVG Icon Type

[Luis]

Hi guys,

When using the official code, posted here > https://generatepress.com/forums/topic/inline-post-navigation-with-svg-icon-type/

I noticed a slight visual difference as the screen shrinks to mobile view.

I like how the ‘Previous’ looks in mobile view and was wondering what CSS changes are needed to make ‘Next’ look like a mirror version?

(If that’s too involved, I would be okay with ‘Previous’ being a mirror version of ‘Next’ and the icons sitting at the top).

I had a decent go at this but my CSS isn’t that great.

Thanks a bunch. =)

[David]

Hi there,

try adding this CSS:

.post-navigation .nav-previous {
    display: flex;
}

.nav-next .gp-icon,
.nav-previous .gp-icon {
    align-self: flex-start;
    margin-top: 2px;
}

It will align the two next/previous icons to the top of the element.

[Luis]

Thanks, that’s perfect!

[David]

Glad to hear that!

[Author]

Posts