I am trying to adjust the size of a header so it works better on mobile. I want to make it smaller. I am not a coder, but I think I can do this in the css or something. style sheet? Can someone tell me where (like: css style sheet, etc.) to change this and what the code to do so should be?

It is set to h1 and i want to make it either its own size or set to h2:

It is this line of code in the inspector:

<h1 class="page-title">Greenville</h1>

This is the full section of code below:


<div id="”page”" class="”hfeed">
Skip to content
<header id="”masthead”" class="”site-header”" role="”banner”">
<div class="”hero”">
<div class="”hero-inner”">
<div class="”page-title-container”">
<header class="”page-header”">
<h1 class="”page-title”">Greenville</h1>
</header>


when you look at this page on mobile the greenville word breaks the last letter to a new line.

[Moderator note: Such links are no problem as long as your link is clearly labeled NSFW – ftfy]

@media only screen and (max-width: 40.063em) {
  h1 { font-size: 2em; }
}

Adjust the numbers as you like. 40.063em is your theme’s normal breakpoint where mobile styling is applied, the other is 61.063em. It’s good to follow the same breaks, but not required. This will apply to all mobile h1 styles on the site, not just GREENVILLE. The style can be more specific if needed by adding other container classes in front of h1. For example, adding .page-header will only affect h1s in page headers.