How to Make the Pagination Text Smaller on Squarespace Mobile

Ever notice how the ‘Next’ and ‘Previous’ pagination text at the very bottom of your Squarespace blog posts look huge on mobile?

While you CAN choose a different font from your site styles, it’s difficult to get this text to look good on both desktop on mobile.

Well, you don’t have to choose between the two, because it’s super easy to change the font size JUST on mobile with a little bit of Custom CSS, but I’m going to show you both ways in this post.

You can watch the YouTube tutorial or follow along here.

BEFORE ADDING CUSTOM CSS

AFTER ADDING CUSTOM CSS

Change Font Size of Next and Previous Text in Site Styles on Squarespace

 The first way to adjust pagination font size is by assigning font styles in ‘Site styles,’ you know, the little paintbrush in the upper right corner when you’re in ‘Edit.’

Changing the font size here will affect both Desktop and Mobile.

Here’s how you do it;

1. Select ‘Site styles’ > Fonts > Assign styles

2. Scroll down to ‘Blog post’ and select ‘Pagination’

3. Select ‘Paragraph,’ ‘Heading,’ or ‘Custom font’

4. Choose a preselected font size or set a custom size

5. Select ‘Save’

Be sure to check this on both desktop and mobile.

Typically what I’ve noticed is it either looks good on desktop or mobile, so I usually choose a font and font size that I think works well on desktop and then I add custom CSS to change the font size of the next and previous text on mobile.

Scroll down to learn how to make the pagination text smaller on Squarespace mobile using custom CSS. (So easy).

Q1: Will changing the pagination font size affect other text on my site?

No, adjusting the pagination font size in ‘Site styles’ only affects the next and previous post links.

Q2: What if I want a completely different font for pagination text?

You can assign a different font by selecting ‘Custom font’ under the ‘Pagination’ section in ‘Site styles.’

Use Custom CSS to Change the Font Size for Next and Previous Text on Mobile Only in Squarespace

 Before you start, go to a blog post and select mobile view. Then scroll down so you can actually see the next and previous pagination text.

Then follow these steps:

1. Go to Pages > Website tools > Custom CSS

2. Cope the code below (scroll down) in Custom CSS

3. Adjust the font size to whatever you want it to be

4. Adjust the font weight to whatever you want it to be

5. Select ‘Save’

So easy, right?

Q1: Can I use this CSS to change the color of the pagination text too?

Yes! You can modify the CSS to change the color by adding color: #yourcolorcode!important; within the code. Just replace #yourcolorcode with your desired color hex code.

Q2: What if the CSS changes don’t show up on my site?

If your changes aren’t appearing, try clearing your browser cache or refreshing the page.

Code Snippet

/* Change blog pagination title size on mobile */

@media screen and (max-width:767px) {
h2.item-pagination-title {
   font-size: 14px !important;
  font-weight: 400!important;
}
}

Was this helpful?

Was this exactly the solution you were looking for? Are you going to use this for yourself? Your clients? Both? Please share your thoughts in the comments 👇

---

If you liked this post, you’ll LOVE these:​​

• How to Hide Tags on a Squarespace Blog Post with Custom CSS

• Add an Author Bio to Your Squarespace Blog to Show Authority

• How to Make a Vertical Line in Squarespace with Custom CSS

• The Best Way to Share YouTube Videos in Your Squarespace Blog Posts

This page contains affiliate links

My Insta

@jenxwebdesign

Like this post?

Pin It to Pinterest 👇