Blog, Website & Page Publishing

LizBW
Participante

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

resolver

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 Avaliação positiva
1 Solução aceita
ProGrahamer
Solução
Colaborador(a)

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

resolver

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.

Exibir solução no post original

3 Respostas 3
MatthewShepherd
Conselheiro(a) de destaque

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

resolver

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
Solução
Colaborador(a)

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

resolver

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
Participante

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

resolver

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!