Next/Previous Article Section – Word Break Property issue

[Tekguild]

Hello!

I’m working on customizations for a client site and have come across and issue with the Next/Previous article headings/text.

First, the text in the next/previous sections are jammed right up against each other (width is 50% on each element, with no margins). Seems like an odd design decision.

Next, and more importantly, the post-pagination-wrap h2 CSS has a property of word-break: break-all, which makes the text break very oddly, by just breaking anywhere in the word where it hits the edge of it’s container.

Lastly, I can’t override the ‘post-pagination-wrap h2’ using the My Custom CSS plugin, the child theme CSS, or a more specific selector (which, technically, is the right way to do it) even if I use ‘!important’. I tried ‘.next-article h2’, ‘.next-article > h2’ and ‘.next-article > h2 > a’ and all of them are still overridden by the ‘post-pagination-wrap h2’ property.

So I’m hoping for some help in figuring out why even the more specific selectors don’t work when trying to override that property, as well as understanding why you chose to use the ‘word-break: break-all’ property at all.

Thanks!

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Hi

Please can you provide me with your link

– Kyle

[Tekguild]

This reply has been marked as private.

[Kyle – SUPPORT]

Try adding this to your custom css:

.post-pagination-wrap.prev-next .next-article {
  float: right;
  width: 47%;
}
.post-pagination-wrap.prev-next .prev-article {
  float: left;
  width: 47%;
}
.post-pagination-wrap h2 {
  word-break: keep-all;
}

That should fix the issue

– Kyle