[Resolved] Single post Next-Previous line spacing

[Ola]

Hi!

I’ve changed the navigation for Next/Previous on blog posts to be on opposites sides (https://docs.generatepress.com/article/inline-post-navigation/ and https://generatepress.com/forums/topic/single-post-next-previous-navigation-handle-linebreaks/).

However, line spacing is high, especially on mobile when the post title spans several lines. (See https://www.stag1.ikigai.se/malarbete/det-finns-alltid-ett-mal-till/)

I’ve tried to adjust it with the following code. It works fine on desktop but it only has effect on spacing larger than default on mobile. What do I do wrong?

Best regards,

/Ola

.site-main .post-navigation {
    margin-top: 0px;
    font-size: 18px;
    font-weight: bold;
		line-height: 1.4em;
}

@media (max-width: 768px) {
		.site-main .post-navigation {
			line-height: 1em;
}
}

[David]

Hi there,

try this CSS, on small screen ( mobiles ) it will also stack the navigation to stop the two elements from overlapping when long words are the title:

/* Reduce font size and lineheight on smaller devices */
@media(max-width: 768px) {
    .post-navigation > div * {
        font-size: 16px;
        line-height: 1em;
    }
}
/* On small devices stack the navigation and add border between */
@media(max-width: 500px) {
    .post-navigation {
        flex-direction: column;
    }
    .post-navigation > div {
        width: 100% !important;
    }
    .post-navigation div {
        padding: 20px 0;
        
    }
    .post-navigation .nav-previous {
        margin-bottom: 10px;
        border-bottom: 1px solid #ccc
    }
}

[Ola]

Great!

Thanks!

/Ola

[David]

You’re welcome

[Author]

Posts