Jump to content

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

Recommended Posts

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

 

image.png

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

Edited by Beyondspace
fix for mobile

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

My testing

image.thumb.png.c6b2da38ffee008a762bcccdf8817f9b.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
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? 

IMG_F5F9CD32B9AA-1.jpeg

Link to comment

You can try again my previous post

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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
  • 1 month later...
  • 2 months later...

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.

Screenshot 2023-06-30 at 10.22.36.png

Link to comment
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.

Screenshot 2023-06-30 at 10.22.36.png

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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 4 months later...

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.

 

 

 

Screenshot 2023-11-17 at 20.13.05.png

Screenshot 2023-11-17 at 20.12.43.png

Screenshot 2023-11-17 at 20.14.56.png

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.