Jump to content

Help! Mobile font is displaying different and overlapped on mobile but not desktop?

Recommended Posts

Hey everyone, 

As you can see the font is appearing doubled and slightly overlapped on my actual phone (see red circles), compared to the desktop view of the mobile. The font also appears much thicker on the phone? How can I set the font to the exact same?




Screen Shot 2023-07-18 at 3.10.51 pm.png

Edited by tayspilates
Needed to update part of it
Link to comment

Hey @tayspilates - it looks like the "Perks" page has it's own unique password applied to it, so I can't reference the exact example... 

If you can share that PW, I can target it exactly to see what's going on and to test code, but in the meantime you could play around with a media query (to target only mobile screens), and that specific typeface to adjust for letter-spacing:

@media all and (max-width: 768px) {
h1 {
letter-spacing: .05em !important;


Lmk if you can either share that pw or remove the page-specific pw so I can try to recreate and solve the problem on my end!

Link to comment

Hi @tayspilates, it looks like it is the same letter-spacing and thickness on both screensizes, but it only appears to be closer/thicker on smaller screens, because you have large characters in a smaller space. To make adjustments, I would play around with the following code while previewing the effects on mobile in edit mode to see what meets your preference!


/* Mobile Screen Size Updates */
@media all and (max-width: 768px) {

.Marquee h1 {
letter-spacing: .0em !important;
font-size: 50px !important;



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.