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

SOLVE
Highlighted
Occasional Contributor

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?

Reply
0 Upvotes
1 Accepted solution

Accepted Solutions
Regular Contributor

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.

3 Replies 3
Advisor | Platinum Partner

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

 


Did my post help answer your query? Help the Community by marking it as a solution.

Matthew Shepherd

An Inbound Growth Agency
Platinum HubSpot Partner

Regular Contributor

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.

Occasional Contributor

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!