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.

Hi @Ziggy, 

I had the same problem and I used this code and it works brilliantly for my headers: 

<style>
  @media screen and (max-width:767px) {
#page section:first-child {
    min-height: 30vh !important;
    height: 50vh !important;
    margin-top:0px;
}
}
</style>

However, it breaks my mobile view of my blogs. I can't see the upper 1/3 and it crowds the footer into the text. Can you help? I spoke to Squarespace and they said as it's code they can't help me. 

acerintegration.com/writing

Thank you! 

2 minutes ago, LeeM said:

acerintegration.com/writing

What code do you have, something is quite broken!

The code I've provided in this thread has been very simple heading sizing, and shouldn't effect the broken parts of your website.

Can you share the CSS with me?

Hi @Ziggy, 

It was a slightly different issue for me. My headers weren't mobile responsive. They are images and not text so I've been using this code and it's been working great for years. It's only now that I'm trying to add a blog page that the scripts running due to the code are making it impossible. the Squarespace guy said I needed better code to still shrink the headers accordingly but not break the blog page. 

This is the code: 

<style>
  @media screen and (max-width:767px) {
#page section:first-child {
    min-height: 30vh !important;
    height: 50vh !important;
    margin-top:0px;
}
}
</style>

This is the problem:

You have a fixed height set for the first section of every page, so the rest of the blog ends up being an overflow.

You either need to exclude the blogs or just target the pages you want this code to apply to.