Jump to content

Headers not scaling down on mobile

Go to solution Solved by Ziggy,

Recommended Posts

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

Link to comment

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!

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment
  • Solution

I'm sorry actually I meant to put that code in a media query so it only effects the mobile site:

@media only screen and (max-width:767px) {
 #collection-634d2451e98a0b7dbaa88e44 {
  h2 {
   font-size:8vw;
  }
 }
}

@Bridie

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment
  • 2 weeks later...

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

IMG_6157.thumb.PNG.6928eb3b803ce674f983c7b546130eae.PNGIMG_3961.thumb.JPEG.3c02ccb4b69f1e842d064ff513d70ff1.JPEG

Link to comment

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.

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment

@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

Edited by Gabrielle_Studiowp
Link to comment
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.

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment

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

Edited by Gabrielle_Studiowp
Link to comment

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! 

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

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

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.