Headers not scaling down on mobile

Hi, I think on all my pages the header text is scaling down to fit on the mobile width except for my contact page - for some reason the second and third headings on the page 'collaborations' and 'recommendations' are breaking across the page on mobile view. They have no custom css attached to them and i've tried removing all formatting, deleting and re-adding etc. Can anyone spot the problem please?

It's this page: www.whyyoucreate.com/contact

Password: cr3ate

Hi @Bridie I'm having a look at your website and I can see the problem, I think the only way you'll fix that without effecting the desktop style or changing to a smaller heading is to target those specific headings with a responsive font size (maybe consistent on that one page, depends on your preference).

Page-wide:

#collection-634d2451e98a0b7dbaa88e44 {
  h2 {
    font-size:8vw;
  }
}

Specific to just those two headings:

#block-fd9f3d03dd6ac8057856, #block-yui_3_17_2_1_1668018970547_1965858 {
  h2 {
    font-size:8vw;
  }
}

Nice website BTW, very bold!

Oh that's worked brilliantly, thanks so much!

And many thanks for the compliment, that means so much!!

Hi, I have a similar issue. This website for my client launches tomorrow and I'm running into a issue with text on one page appearing very different pending on the mobile device. It looks fine when using mobile view on my computer but on an actual iPhone it looks wrong (Screenshots below).

I desperately need assistance on this as I'm on a time crunch! Any help would be much appreciated. 

Website is: cameronbuy.com

screen shot 1 is how it should appear on mobile. Screen shot 2 is how its appearing on a different iPhone than mine. Even the image icons are being affected for some reason? @tuanphan @ziggy

@Gabrielle_Studiowp try adding this to your Custom CSS:

@media only screen and (max-width: 767px) {
  h1 {
    font-size: 9vw;
  }
}

Hope that helps!

Thank you so much! Do I have to use the collection ID for that specific page in the coding? Also could i use pts (for example on desktop the font is 34pts give or take...if I knocked off a few points in mobile to around 21 pts it looks good) or do I have to type 9vw; @Ziggy

Yes, I would add the section ID:

@media only screen and (max-width: 767px) {
 section[data-section-id="62d1bea415e407318d4735b4"] {
   h1 {
    font-size: 9vw;
   }
 }
}

pts is generally used for printing purposes, I would recommend using REM instead, but I suggested VW as it is a relative unit that scales the font based on the screen width.

@ZiggyOh interesting, noted! Thank you for explaining that. Last question - would the 9vw look equivalent to 21 pts ish? It's weird because on my end everything looks fine, but I can really only see if it works well on a phone other than mine. 

Also I will definitely buy you a coffee for your help, I appreciate it so much

3 minutes ago, Gabrielle_Studiowp said:

would the 9vw look equivalent to 21 pts ish

Sometimes... 9vw seems to keep the titles as big as they can get without wrapping mid-word in my testing.

A million thanks @Ziggy Hope you have a great day 

Just now, Gabrielle_Studiowp said:

A million thanks @Ziggy Hope you have a great day 

No problem! You too!

@Ziggy I've found a new issue. I didn't add any css to this header but I notice when I'm on a mobile device and I scroll past the header, it goes in and out of two different sizes for some reason?  I've attached a video below.

I've changed the header to just be a standard h1 heading (for now) instead of it being a custom scaled text option. 

Wow, that's an interesting issue, I'll have to scratch my head over this, but it almost seems like the viewport width is changing when you scroll past ... caused by the scrollbar??? Weird! 

@Ziggy Right?! The only way I could resolve it was by not using the 'scale text' feature on Squarespace. Even the custom css you suggested before didn't fix the issue

Yes, \I'll have to test the scale text feature on mobile more, and see if I can pinpoint the problem, and then log a bug with Squarespace.