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

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?

@tayspilates can you please share the url and password so we can inspect it?

@MayaViolet the url is https://cello-flugelhorn-aj6z.squarespace.com and PW is Wally23tv

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!

@MayaViolet Wow thank you so much!! You're very helpful!! I've removed the password now 🙂

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;
}

}