Change font size for mobile screens

Hi Rachel!

Sorry to hear that using VW to control your font sizes did not work out as expected and we will do everything we can to help work with our WordPress themes on your website!

Right now the best way to control the specific font sizes of HTML text elements on mobile displays in our themes is to use some custom CSS with media queries.

The following CSS snippet uses a media query that tells the code within it to only run on when the webpage is displayed below a particular pixel width, in this case the break point between mobile and tablet sizes.

@media only screen and (max-width: 767px) {
h1, h2 {
font-size: 30px;
}
}

That code is currently configured to only target elements the use the H1 and H2 element types, but please let us know if you need any additional help getting the code tailored to fit your website structure and we will help as best we can! If you ever have any other questions for us in the future please do not hesitate to ask, we are always happy to help!

Hi Ethan-

You’ve got the right place there, but there was something we didn’t notice before. That particular heading has an explicit font-size set right now.

Edit the page, and you can use the text tool to adjust it:

Or, switch to the text editor and delete the explicit font size altogether:

Hi Ethan-

Sorry about that, there was a typo in the original code we provided to you. Remove the semi-colon in the media query on the first line, so that it looks like this:

@media only screen and (max-width: 767px) {
h1, h2 {
font-size: 30px;
}
}

Hi Ethan, sorry to hear that there are still some problems getting your font to display as expected!

I took a look at your website in a mobile view and it appears that your rule to change the font size of H1 elements is now working.

One possible reason why you might not have seen that changes on your last attempt is browser caching. Forcing your browser to fetch the new CSS rules by either clearing the cache or viewing ytour website is Private/Incognito window is the best to way to ensure that you are getting the most updated style rules for your website.

I hope that this was just a caching issue and the fonts are working as expected on your end now, but please let us know if there is anything else that we can do to help!