"Next Post" and "Previous Post" slugs overlapping on blog posts

[LizBW]

We are using a Marketplace template, the "P2H-Premium-Bloog-v2," for our blog, and are having a problem with the Next and Previous Post links at the bottom of posts. See for example https://blog.businesswire.com/tips-for-increasing-interest-in-your-holiday-news-release .

The post titles are overlapping, even when they aren't especially long. Here's the HubL code in the module that creates them:

<div class="pagination-section">
<div class="wrapper">
<div class="post-pagination">
<div class="prev-post">
{% if content.previous_post_slug %}
<div class="nav-text"><a href="/{{ content.previous_post_slug }}">Previous Post</a>
<h5><a href="/{{ content.previous_post_slug }}">{{ content.previous_post_name }}</a>
</h5>
</div>
{% endif %}
</div>

<div class="next-post">
{% if content.next_post_slug %}
<div class="nav-text"><a href="/{{ content.next_post_slug }}">Next Post</a>
<h5><a href="/{{ content.next_post_slug }}">{{ content.next_post_name }}</a>
</h5>
</div>
{% endif %}
</div>

</div>
</div>
</div>

Is it possible to force a line break, or stagger these onto alternative lines, or some other solution that would avoid this problem?

[MatthewShepherd]

Hi @LizBW 

You use can use CSS to control the width of the div that contains the pagination post title text, reducing the width of that div will cause the title text to wrap:

div.nav-text{ max-width:350px; }

[ProGrahamer · Accepted solution]

Matthew is on the right track. I'm suggesting the following:

.next-post, prev-post {width: 45% !important;}

This will set both left and right divs to 45% and override the responsive css.

[LizBW]

I tested both of these in the CSS doc for the blog and it looks like setting it as a % works well with our design. Thanks to everyone for the help!