How can I keep page/project title from extending off-screen on mobile?

Site URL: https://www.meganhochstrasser.com/

I have three main words ("projects") listed on the homepage of my site (screenshot 1). They look great on desktop but on mobile, the word "Communication" is so large that it extends off the screen. This is also happening in the header on the Communication page (2) and in the bottom-screen navigation that directs users from the Science page to the Communication page (3). Is there a way to adjust these without making them smaller on desktop?

https://www.meganhochstrasser.com/, pw: J@s7w^3$U3GYwv

Thank you in advance for any help!

Add to Design > Custom CSS

@media screen and (max-width:767px) {
span.portfolio-hover-item-content {
    font-size: 36px;
}
}

@tuanphan Thank you!!!!!!! That fixed the homepage issue, but not those shown in screenshots 2 and 3 (the header text on the Communication page and the link to the next portfolio page at the bottom of the Science page). Any ideas for those? 

Also, this is probably separate but I'm using a built-in Squarespace font called "Poppins" and it isn't displaying on Safari on mobile, but seems okay everywhere else. I see solutions elsewhere for this issue with custom fonts, but am confused as to why a standard option would have this issue and whether the same fix will work.

#1. #2. Add to Design > Custom CSS

/* communication science on mobile */
@media screen and (max-width:767px) {
h2.item-pagination-title {
    font-size: 16px !Important;
}
/* science */
div#block-f3ec2316c9f6369a72aa h1 em {
    font-size: 38px;
}
}

#3. Do you use Personal or Business or Commerce Plan?

@tuanphanThank you SOOO much! This all worked perfectly.

I use the Personal Plan.

On 1/16/2022 at 4:59 AM, MeganH888 said:

@tuanphanThank you SOOO much! This all worked perfectly.

I use the Personal Plan.

Try add a Code Block on Site Footer >> paste this code >> Then save & reload the site

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;1,300&display=swap" rel="stylesheet">

@tuanphan Thank you for this, I tried it but don't see any difference on Safari on iOS. I also just tested Firefox and Firefox Focus on mobile and the fonts display correctly in Firefox but not in Firefox Focus. Any other ideas?

@tuanphan Another update, I just tried this on my partner's phone and the fonts display correctly on Safari for him. I have an iPhone Xs, he has an SE. Not sure if this provides any clues!

(By the way, I also had to make all the "communication" text you helped me with even smaller to fit onto his small screen, so it was a useful test device. Hopefully now things will look okay even on devices I don't have handy.)

On 1/18/2022 at 3:16 AM, MeganH888 said:

@tuanphan Thank you for this, I tried it but don't see any difference on Safari on iOS. I also just tested Firefox and Firefox Focus on mobile and the fonts display correctly in Firefox but not in Firefox Focus. Any other ideas?

Can you take a screenshot?

9 hours ago, tuanphan said:

Can you take a screenshot?

Sure thing, here's a screenshot from Firefox (correct):

and Safari (incorrect):

On 1/17/2022 at 10:19 AM, tuanphan said:

Try add a Code Block on Site Footer >> paste this code >> Then save & reload the site

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;1,300&display=swap" rel="stylesheet">

 

Try this new code

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;1,300&display=swap" rel="stylesheet">
<style>
  div#block-f3ec2316c9f6369a72aa * {
    font-family: 'Poppins', sans-serif !important;
}
</style>

3 hours ago, tuanphan said:

Try this new code

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;1,300&display=swap" rel="stylesheet">
<style>
  div#block-f3ec2316c9f6369a72aa * {
    font-family: 'Poppins', sans-serif !important;
}
</style>

 

Still didn't work! This is tricky... I tried clearing my cache and disabling some mobile ad blockers/security apps too. Any other ideas? Thank you for all your help so far!

@tuanphan Would it be crazy to try adding “Poppins” as if it were a custom font? I’ve found a lot of your answers to people’s questions about custom fonts not displaying on Safari, wondering if this could be a workaround. I hope that makes sense!

5 hours ago, MeganH888 said:

@tuanphan Would it be crazy to try adding “Poppins” as if it were a custom font? I’ve found a lot of your answers to people’s questions about custom fonts not displaying on Safari, wondering if this could be a workaround. I hope that makes sense!

You can remove above code & try contacting Squarespace Customer Care to see if they has another solution. Poppins is Squarespace font, it should work..

8 hours ago, tuanphan said:

You can remove above code & try contacting Squarespace Customer Care to see if they has another solution. Poppins is Squarespace font, it should work..

Okay, I'll get in touch with them. Thanks a ton!