Size and color of logo / site title in mobile

First of all, don’t edit the theme files directly, otherwise your changes will be overwritten whenever the theme is updated.

An easy way to add custom CSS is to install the Jetpack plugin and activate the Custom CSS module. You’ll then add your custom CSS in the new stylesheet editor that’ll appear in your dashboard, under Appearance > Edit CSS.

As alternatives, you could either install a standalone custom CSS plugin, or create a child theme.

Once you’re ready to roll with your CSS, here’s the rule I’d add:

@media screen and (max-width: 360px) {
  #branding img {
    max-height: 100px;
  }
}

This should overwrite the max-height set on the logo by the theme. Adjust as required!

Looking good!

The reason your code isn’t working as expected is because it’s targeting the #site-title h1 element itself, but this element has a link (an a element) inside it, and the rule for that link takes precedent. If you target the a element *inside* the h1, it should work as expected.

This should get everything sorted right out:

#branding #site-details h1#site-title a {
  color: #0085bd;
}