2) How to make the site title, description, and header image scale down on mobile devices. It basically just keeps them all at the same size and completely obscures the screen with the giant white letters piled on top of each other – not ideal. I’ve made lots of “Additional CSS” entries to make the header image and text look right (on Desktop), but removing them seems to have no effect on the mobile responsiveness. I tried a few examples of code like the following, which seem to have no effect:

@media screen and (max-width: 480px) {
  .wf-active .site-title {
    font-size: 36px;
  }
  .wf-active .site-description {
    font-size: 16px;
  }
}

Any ideas gladly welcomed.
Thanks!

I recommend that most width rules be specified as percentages or in terms of viewport width (% or vw) all the time. Fixed pixel widths should be avoided.

I don’t see where the wf-active class is part of any rules that apply to the title. Try removing it from your selectors.

@media screen and (max-width: 480px) {
  .site-title {
    font-size: 36px;
  }
  .site-description {
    font-size: 16px;
  }
}

You may need to flush some caches to see CSS changes, either server side or client side. If you can, turn off any caching while you’re working on site layout.