Blog, Website & Page Publishing

LizBW
Participant

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

SOLVE

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?

0 Upvotes
1 Accepted solution
ProGrahamer
Solution
Contributor

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

SOLVE

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.

View solution in original post

3 Replies 3
MatthewShepherd
Key Advisor

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

SOLVE

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

 

Matthew Shepherd

Freelance HubSpot Consultant
CRM Consultant | SEO Specialist

Did my post help answer your query?Help the community by marking it as a solution.
ProGrahamer
Solution
Contributor

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

SOLVE

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
Participant

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

SOLVE

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!