long post titles makes prev and next buttons stacking on each other

Sparkling
1

here is an example check the prev and next buttons under the comments inside a post

https://bunckyspa.com/test-article-4/

you will see that if i made a long post title the boxes will be stacked on each other there should be a wrap text that makes the titles wrap on the left for next button and wrap the text on the right for the right button but i am not good with css and i wonder how can we fix that?

2

After playing around with css i figured out that the only way i can do to fix that based on my minimum knowlowdege in css are making a new entry in style.css

add this
width: 350px;

in element

.post-navigation a, .page-numbers, .pagination .prev, .pagination .next {
    border: 1px solid #DADADA;
    background-color: #FFF;
    padding: 8px 14px;
    font-size: 12px;
    word-wrap: break-word;
    border-radius: 4px;
    margin: 0 0 1.5em;
    overflow: hidden;

so it looks like this

but as i said i am not good with css so i want to know are my method correct or should be another good solution better than what i just did?

3

oh i don’t think its a good solution it affects the old post and new post buttons on pages too as well makes it bigger than it should be, well i am gonna wait for a solution if anyone had

4

well i ended up doing this in additional css code

.nav-previous {
	width: 350px;
	text-align: left;
}

.nav-next {
	width: 350px;
	text-align: right;
}

i need someone to confirm this is a good solution or it may affect something else that i am not aware of? like what happen in old and new post when i tried to do this modification in the previous element.

5

Good morning

Thank you for sharing solution, no this will not affect anything else and if you like results you can leave as is :slight_smile: