Header Font too Large on mobile devices

[Jessica]

Hi, I am running Use Any Font on Twenty-Sixteen WordPress Theme. Header font selected looks good on desktop and IPad, but is far too large so its running behind header image and obscuring tag line on mobile device (currently an iPhone). How can I get the header font to adjust for any screen size?

Current code is:
.site-header-main {
margin: -5px;
height: 103px;
}

.site-title {
font-size: 60px;
letter-spacing: 4px;
word-spacing: 5px;
padding-left: 6px;
font-style: italic;
}

.site-description {
padding-left: 10px;
margin-top: -1em;
font-family: Montserrat;
color: #a19c9c;
}

#masthead.site-header {
padding-top: 3em;

[Author]

Posts