text logo using site title and description issue issue on mobile size

Hi,
I want to use the site title and description instead of a logo. I have used some code for quick css and modification to the functions file in child theme that I got from this forum. There have been many postings on this. The one I am using is below. I still need a modification or perhaps use a different one entirely?? The issue is that the first line wraps on mobile and runs into the second line which is the site description. Another issue is that I would like line 2 to be centered.

Here is my temp site – http://k8r.223.myftpupload.com/

Changes to functions file in child theme

//——————————-
// function – Text Logos
//——————————-
add_filter(‘avf_logo_final_output’, ‘avf_text_logo_final_output’);

function avf_text_logo_final_output($logo) {
$link = apply_filters(‘avf_logo_link’, home_url(‘/’));
$logotext = “Charlotte Meehan”;
$subtext = “Playwright | Professor | Artistic Director”;
$subtext = “<span class=’subtext’>$subtext</span>”;
$logo = “<span class=’logo’><h1>“.$logotext.$subtext.”</h1></span>”;

return $logo;
}

Changes added to quick css

/* Text logo styling */

#top .logo,
#top .logo a {
overflow: visible;
}

#top .logo {
background: transparent;
display: flex;
align-items: center;
}
#top .logo .subtext {
font-size: 14px;
color: #000000;
position: absolute;
width: 100%;
left: 0;
top: 25px;
}

Thank you