How to change font size on mobile only - Squarespace 7.1

---

Add this code to Custom CSS.

Adjust the “2rem” to a number that is either a whole number or has 1 decimal place.

Mobile size

/*Reducing font size for screens smaller than 640px*/
@media screen and (max-width: 640px) {
  h1 {
    font-size: 2rem;
  }
  h2 {
    font-size: 1.8rem;
  }
  h3 {
    font-size: 1.6rem;
  }
  h4 {
    font-size: 1.4rem;
  }
} 

Tablet size

/*Reducing font size for screens smaller than 960px*/
@media screen and (max-width: 960px) {
  h1 {
    font-size: 2.2rem;
  }
  h2 {
    font-size: 2rem;
  }
  h3 {
    font-size: 1.8rem;
  }
  h4 {
    font-size: 1.6rem;
  }
}