Prevent Site Title (and subtitle) Stacking on Mobile Screen

Hi,

Site: https://www.boutique14.co.uk

How do I prevent the site title from stacking on mobile please?

On desktop it looks like this:

But when it goes to media screen / mobile view the site title  and subtitle stack like this:

I have tried using a mobile-only logo which is merely a jpg screen grab of the site title from desktop view, and that looks ok (ish), but ideally I'd like to find a way to keep using a site title in text rather than a mobile logo.

Is there someway it can dynamically scale the font size so it always stays on one line?

NB I'm also using this CSS to create the subtitle "bespoke wedding stationery"

//Inserts subtitle 2nd line to site title and styles it//
a#site-title:after {
    content: "bespoke wedding stationery";
    display: block;
      font-size: 1.3rem;
      font-family: 'Garamond';
      letter-spacing: 3px;
      line-height: 1.3rem;
}

Obviously I want to retain the subtitle and prevent that from stacking too.

Thank you!

Tom  

@TomKnowsNoCSS I would do this with some media queries at different breakpoints, most likely just 640px and under. Change your CSS to this and adjust those font sizes below. You can copy and paste the media query and change the size to something else 767px 500px 320px etc.

a#site-title {
  &:after {
    content: "bespoke wedding stationery";
    display: block;
    font-size: 1.3rem;
    font-family: 'Garamond';
    letter-spacing: 3px;
    line-height: 1.3rem;
  }

  //change these font sizes or add different pixel widths as needed
  @media only screen and (max-width: 640px) {
    font-size: 20px !important;
    &:after {
      font-size: 1rem;
    }

  }
}

Thank you Jaeveedee, I appreciate your help.

Although that solved the problem in principle, in practice I couldn't find the optimal font sizes to make it work across all devices, so I've gone with a mobile logo jpg.

Thank you though.