font adjusting font size for mobile - I know this has been answered a million times but I'm not getting it

Hello squarespace forum friends!  

I have been searching the forum for days and trying the code that's been suggested but I just can't seem to make the HOME page header font size h2 (4.2rem) on the mobile and h1 (6.5rem) size on desktop. 

https://www.fearlesscreative.agency

Thanks in advance!

this is the code I'm using:   

@media screen and (max-width:640px) 
{h1 {font-size:4.2rem!important} }

Can you share how to adjust the font size for one specific block so that it's smaller on mobile? It's an h2 heading. 

On 1/29/2024 at 4:48 PM, Fearless said:

I have been searching the forum for days and trying the code that's been suggested but I just can't seem to make the HOME page header font size h2 (4.2rem) on the mobile and h1 (6.5rem) size on desktop. 

Hi, you mean this text in the screenshot? 

The code you are using is targeting h1. The text in your hero section is h2.

3 hours ago, Fearless said:

this is the code I'm using:   

@media screen and (max-width:640px) 
{h1 {font-size:4.2rem!important} }

Hi Melody,  Thanks for getting back.  Yes it's currently h2 on desktop to make it look okay on mobile.  What we like is to make it h1 on desktop and h2 on mobile.

6 hours ago, Fearless said:

Hi Melody,  Thanks for getting back.  Yes it's currently h2 on desktop to make it look okay on mobile.  What we like is to make it h1 on desktop and h2 on mobile.

You'll need to change the text back to H1 (that's better for SEO as the page heading anyway), then the code you're using will work and you can adjust to the size to what you want it to be on mobile.

Thanks all! I was able to figure it out.  I actually just needed to make the font even smaller than h2.  Big learning curve!