Responsive Desktop/Mobile Solution with vanilla CSS/JS

Hey Colin, nice work on this challenge. You're using rem units, which is the first part of easily scaling content size for responsive websites. At the moment though, you're manually changing each font-size declaration within the media queries to scale the sizes.

The power of the rem unit is that it always looks at the font-size of the html element. That means that you can simply change that single property and all properties using rem in their value will scale proportionally. So my CSS for responsive content often looks something like this:

html {
  font-size: 55%;
}

@media (min-width: 768px) {
  html {
    font-size: 57.5%;
  }
}

@media (min-width: 1024px) {
  html {
    font-size: 62.5%; /* makes 1rem == 10px on larger screens for easier calculation */
  }
}

h1 {
  font-size: 4rem; /* often doesn't need to change */
}

It will change project-to-project based on the design, but it will have this kind of pattern. You might need to make small tweaks here and there, but it makes your content scale much more consistently.

I hope that helps!