Formatting the bottom of the blog post area (categories, next/prev post)

Hi there,

1) Make the next/previous appear on one line rather than two?

Try adding this css:

nav#nav-below {
    display: flex;
    justify-content: space-between;
}

.nav-previous, .nav-next {
    width: 50%;
}

You can then use .nav-previous and/or .nav-next individually as selectors if you wish to change the text alignment.

2) Can move the carrot on the next post to the other side?

I'm not sure what you meant by "carrot".

If you meant the chevron-like arrow, you can add this CSS:

.nav-next .next:before { display:none; }

.nav-next .next:after { 
    content: "\f105";     
    font-family: GeneratePress;
    text-decoration: inherit;
    position: relative;
    margin-left: .6em;
    width: 13px;
    text-align: center;
    display: inline-block;
}

3) Can we add a header above the links that says “More to read”?
4) Make the categories fit into this formatting too (e.g. “more from this category” then “more reading” headers?<

Can you explain a bit more on how you want this to appear? Mockup images would help us get a better idea of how you want it to be laid out.

Let us know.

1 and 2 worked awesome! Thank you!

For 3 and 4, see private info for a mockup.

Hi S,

For 3 and 4 try this CSS:

@media (min-width: 769px) {
    footer.entry-meta .cat-links:after {
        content: "More Reading:";
        font-size: 25px;
        position: absolute;
        left: 50%;
        transform: translatex(-50%);
        top: 32px;
    }
    footer.entry-meta {
        display: flex;
        flex-direction: column;
        position: relative;
        padding-top: 40px;
    }
    footer.entry-meta:before {
        content: "More from this category";
        font-size: 25px;
        position: absolute;
        left: 0;
        top: 0;
    }
}

Let me know how it works :)