Jump to content

H1 Font suddenly enlarges in desktop window

Recommended Posts

Site URL: https://mcnaegroup.squarespace.com/config/

Website: https://mcnaegroup.squarespace.com/config/
Password: studio@mcnaegroup1

I have a H1 heading which looks great in a full window, and in mobile view...but if you make the desktop window slightly smaller the text suddenly jumps bigger.

I thought changing the tablet text size might help but i had no success. Can any one help?

//mobile text size//
@media only screen and (max-width: 767px) {	   h1 { font-size: 35px !important; line-height:115% }}
//tablet text size//
@media screen and (max-width: 960px){	   h1 { font-size: 35px !important; }}

 

GOOD.png

BAD.png

Link to comment
  • Replies 3
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

  • 1 year later...

Hi @S74

I have the exact same problem.
Interesting solution with clamp, but as I'm not a developper, I can't fit your solution properly into my problem.

Can you please help me to setup the clamp function properly for my case ?

https://www.anthonymartin.fr/andrei-molodkin-government-down

The H1 title shrinks down when I enlarge the window. What would be the values I would need to parameter the clamp function with ? My H1 title is currently set to 4.7rem.
Then I will replicate the same logic for all titles because H2, H3 and H4 are doing the same thing in all my website.

Thank you very much.

Anthony

Link to comment
On 7/12/2023 at 4:40 PM, Anthony_M said:

Hi @S74

I have the exact same problem.
Interesting solution with clamp, but as I'm not a developper, I can't fit your solution properly into my problem.

Can you please help me to setup the clamp function properly for my case ?

https://www.anthonymartin.fr/andrei-molodkin-government-down

The H1 title shrinks down when I enlarge the window. What would be the values I would need to parameter the clamp function with ? My H1 title is currently set to 4.7rem.
Then I will replicate the same logic for all titles because H2, H3 and H4 are doing the same thing in all my website.

Thank you very much.

Anthony

Enregistrement de l’écran 2023-07-12 à 11.00.44.mov

You can use above code, it should work for your case

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

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.