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;
Select ‘Site styles’ > Fonts > Assign styles
Scroll down to ‘Blog post’ and select ‘Pagination’
Select ‘Paragraph,’ ‘Heading,’ or ‘Custom font’
Choose a preselected font size or set a custom size
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:
Go to Pages > Website tools > Custom CSS
Cope the code below (scroll down) in Custom CSS
Adjust the font size to whatever you want it to be
Adjust the font weight to whatever you want it to be
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 👇
This page contains affiliate links
My Insta
@jenxwebdesign
Like this post?
