Jump to content

How to reduce size of next and previous blog post titles on mobile

Go to solution Solved by CassAggett,

Recommended Posts

My website (www.realchineseacademy.co.uk) has a blog page and I've noticed that on mobile the next and previous blog titles overlap like in this screenshot:


How can I change the size of the text for this specifically? Or is there a way to make the two titles not overlap?


Link to comment

@Sophie16 Here's CSS that I've used (delete the purple lines) with sample values. You may have to add !important after a value below. 

@media screen and (max-width: 767px) {
.item-pagination--prev-next h2{
  font-size: 1.1em;  Make the font size smaller
  line-height: 1.25 em; Adjust the space between lines
  font-weight: 500; You can make the text bold, if desired
  margin-left: -15px; You can create more of a buffer on both sides
  margin-right: -15px;

It looks like your website may also be scrolling from left to right, which it shouldn't do. I'd recommend adding this line of CSS:

html, body {
    overflow-x: hidden;}

Was our response helpful? Click  👍 or mark it as the solution! This helps others find the answers they need. 

My name is Meghan and I'm the owner of Westerly Creative Studio, a Bay Area creative force specializing in Squarespace websites and branding foundations. Follow along on LinkedIn or Instagram for more tips, updates, and resources. 

Link to comment

@WCS This has worked, thank you!


Another issue I noticed is that the blog post titles are stopping halfway across the main blog page for both desktop and mobile versions. Is there a way to change this so it goes across the whole page?


Link to comment
  • Solution

Hey Sophie, double check this setting:

Go to Edit Section on your blog, then on the Format tab scroll down to Text Content Width.



For reference, you can also adjust the next/previous pagination titles in Site Styles without using code. It's under Fonts > Assign Styles > Blog Post > Pagination. This affects both desktop and mobile though, where the code you've got above is just for mobile.


If this helped you, please like or mark my solution as answer so others can scroll to it quickly 👆

Cass Aggett is a Squarespace website designer for go-getting women – no matter what stage of business.



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.