Change font size for mobile custom h3?

Site URL: https://www.meetoffsite.com/home

I created a third font to use on my site by using css to alter the h3 font. This looks great on desktop but I can't figure out how to change it on mobile. It looks huge on mobile and I need to reduce it on mobile.

Below is the css I used for the new h3 style:

//h3 font change//
h3 {

    font-family: roboto; 
    font-weight: 500;
    line-height: 1.8em;
  font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .2em;

}

How can I reduce the new h3 header on mobile sitewide?

Use a media query. 

For example.

//h3 font change//
h3 {

    font-family: roboto; 
    font-weight: 500;
    line-height: 1.8em;
  font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .2em;

  @media (max-width: 640px) {
    font-size: YOURFONTSIZE;
  }
}

I tried a media query but it's not working. Does it have something to do with the fact that I'm using an alternate h3?

On 9/2/2021 at 12:14 AM, RachaelLoerwald said:

I tried a media query but it's not working. Does it have something to do with the fact that I'm using an alternate h3?

I see you used 2 h3 code. You can remove one

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

    h2 {
        font-size: 2.5rem !important
    }

    h3 {
        font-size: 2rem !important
    }

    .sqsrte-large {
        font-size: 1.25rem !important
    }
}

and

@media (max-width: 640px) {
    h3 {
        font-size:8px !important
    }
}