H1 Font suddenly enlarges in desktop window

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; }}

SOLVED:

I added this to Custom CSS

h1 {font-size: clamp(4.3rem, 1vw, 35px) !important;}  

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

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