Tagline squashed

Site URL: https://www.myartbeatflorals.com

My tagline below my logo is a single line on my large desktop monitor, but on my laptop it's two lines overlapped. And it doesn't show up at all on my iPhone. 

Any codes to fix this? Please be specific about what I need to put where...I'm limping my way through this code stuff. 🙂

Because your tagline line-height is 0.5em. Add to Design > Custom CSS

/* tagline overlap */
a.Header-tagline {
    line-height: 1.2em;
}
/* Tagline on mobile */
a.Mobile-bar-branding:after {
    content: "Sola Wood | Artificial | Dried | Preserved";
    font-family: futura-pt;
    font-weight: 700;
    font-style: normal;
    font-size: 11px;
    letter-spacing: .2em;
    line-height: .5em;
    text-transform: uppercase;
    color: rgba(124,121,121,.5);
    display: block;
}

That's not doing anything for either view. But my existing coding says that I'm "missing closing '}' ".

Could that be preventing other codes from working? I have no idea where another '}' needs to go. 

Here is my current coding:

//subtitle under logo//
a.Mobile-bar-branding:after {
    content: "SOLA WOOD | SILK | PRESERVED";
    display: block;
    margin-top: 20px;
    font-size: 8px;
    font-family: futura-pt;
    color: #A0A0A0;
}

@media screen and (max-width: 639px){
  #pitch {
    min-height: unset !important;
}

  
  //remove space at bottom of site on mobile//
.Mobile-bar.Mobile-bar--bottom {
  padding: 0;
}
  /* tagline overlap */
a.Header-tagline {
    line-height: 1.2em;
}

And if possible I would prefer the tagline stay all one line and not go to a second line. Not sure if that's what the code is doing or just giving it room for a second line, but if I do that I would think there'd be extra blank space underneath it on the larger screens. 

This code missing a closing } symbol

You need to add a symbol here

Thank you!!