Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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


MeganH888

Question

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!

1-Homepage.png

2-Communication page.png

3-Bottom of Science page.png

Link to comment
  • Answers 14
  • Created
  • Last Reply

Top Posters For This Question

14 answers to this question

Recommended Posts

  • 1

#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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

@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.

Edited by MeganH888
added tag since this is a reply to another user
Link to comment
  • 0
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">

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

@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.)

Link to comment
  • 0
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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!

Link to comment
  • 0
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..

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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!

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...