How do I change the font size for the previous/next blog post buttons?

Hi there - the titles of our next blog posts are colliding on mobile - Here's an example.  

Is there any way to stop this from happening? Ideally we'd keep the titles but happy if it's 'next' and 'previous' if not. 

Cheers

On 3/5/2023 at 11:38 AM, Krysten-Jadae said:

Hi there - the titles of our next blog posts are colliding on mobile - Here's an example.  

Is there any way to stop this from happening? Ideally we'd keep the titles but happy if it's 'next' and 'previous' if not. 

Cheers

 

You can try adding to Home > Design > Custom Css

.item-pagination-link .item-pagination-title {
  display: none;
}
.item-pagination-link.item-pagination-link--next .pagination-title-wrapper:after {
  visibility: visible;
  content:'Next';
}

.item-pagination-link.item-pagination-link--prev .pagination-title-wrapper:before {
  visibility: visible;
  content:'Previous';
}

Support me by pressing 👍 or marking as solution if this is useful for you

My testing

10 hours ago, Beyondspace said:

You can try adding to Home > Design > Custom Css

.item-pagination-link .item-pagination-title {
  visibility: hidden;
}
.item-pagination-link.item-pagination-link--next .item-pagination-title:after {
  visibility: visible;
  content:'Next';
}

.item-pagination-link.item-pagination-link--prev .item-pagination-title:before {
  visibility: visible;
  content:'Previous';
}

Support me by pressing 👍 or marking as solution if this is useful for you

Hi there - thanks so much for the help. That's looking a bit better but it's still pushing out wider than the screen size on mobile. Any way of preventing this? 

You can try again my previous post

Support me by pressing 👍 or marking as solution if this is useful for you

Hi,

Please can someone assist me with changing the size of the font for the previous/next blog post buttons? The font is very large with the default setting, as per the attached screenshot.

I have tried to use the Style Editor but have not been successful.

It is a private site and the password is Dragon1!

https://hibiscus-bumblebee-wxl5.squarespace.com/

Many thanks!

Alex

Hi,

Pagination is Heading 2, so you can adjust it in Design > Site Styles

Or you can also add this code to Design > Custom CSS

h2.item-pagination-title {
    font-size: 16px !important;
}

Hi Tuanphan,

That worked, thank you so much.

Best,

Alex

I'm facing an issue with overlapping blog titles at the bottom of my blog posts. This occurs when viewing the website on a mobile device, where the titles of the next and previous articles are overlapping.

I would greatly appreciate any help in resolving this matter.

18 hours ago, mandres2 said:

I'm facing an issue with overlapping blog titles at the bottom of my blog posts. This occurs when viewing the website on a mobile device, where the titles of the next and previous articles are overlapping.

I would greatly appreciate any help in resolving this matter.

2 options to deal with this

#1. Reduce text size on mobile (with code)

#2. Replace title with Prev/Next text

What do you think?

I've found a way. Go to "Site Styles" > Fonts > Assign Styles

then look for "Blog Post" or the section which you are creating pagination for. 

In my instance, it was for a blog, so I found "BLOG POST", then "Pagination" and I was able to change the "Style" and "Size" according to the styles and sizes I'd set up. I chose a different header (h4) and a smaller size and the pagination size has been reduced.