Archived topic

Single post Next-Previous line spacing

3 replies · Started by Ola on January 14, 2021

Viewing posts 1–4 of 4

January 14, 2021 at 12:18 am #1618030

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;
}
}

January 14, 2021 at 4:15 am #1618217

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
    }
}

January 14, 2021 at 5:57 am #1618329

Great!

Thanks!

/Ola

January 14, 2021 at 6:43 am #1618398

You're welcome

This archived topic is closed to new replies.

Start building better websites today.