Fixing Cornerstone’s WordPress Post Headline Styles on Mobile

Cornerstone does a “dumb” thing where it sets the native values of headlines to percentages that don’t scale down super nicely. Here’s a quick code block to drop into a site’s Global CSS that will fix it (I mean, probably. You should always check your work).

Note: Apparently this hack only applies when you use the Layout Builder.

@media only screen and (max-width:480px) {
  .x-the-content h1,.x-the-content .h1 {
    font-size:3em;
  }
  .x-the-content h2,.x-the-content .h2 {
    font-size:2em;
  }
  .x-the-content h3,.x-the-content .h3 {
    font-size:1.8em;
  }
  p {
    font-size:1.6rem;
  }
}

The Original Styles (for Reference)

h1,.h1 {
    margin-top: 1em;
    font-size: 400%;
    line-height: 1.1
}
h2,.h2 {
    font-size: 285.7%;
    line-height: 1.2
}
h3,.h3 {
    font-size: 228.5%;
    line-height: 1.3
}
h4,h5,h6,.h4,.h5,.h6 {
    margin-top: 1.75em;
    margin-bottom: .5em;
    line-height: 1.4
}
h4,.h4 {
    font-size: 171.4%
}
h5,.h5 {
    font-size: 150%
}
h6,.h6 {
    font-size: 100%;
    text-transform: uppercase
}