Clickable Phone Number Design Incorrect For Mobile Site

[flexecommerce]

I need the mobile number shown to be in a line and easy to read just like the desktop site below.

If i go to the mobile site (shown below) then the numbers are stacked and not how I need them. 

Site is https://southern-elite-plumbing-and-electrical.myshopify.com/ and password is "home"

[codexecom]

Hey @flexecommerce  
Please add this code on base.css file 

@media (max-width:749px){
.header  .custom-phone-numbers {
white-space: nowrap;
}
}

[flexecommerce]

That uncentered my logo for the mobile site, any way to keep that from happening? making phone number font size smaller? not sure

[codexecom]

Becuase of less spacing in header part, please replace  code some probem will resolve.

@media (max-width:749px){
.header  .custom-phone-numbers {
white-space: nowrap;
}
header.header {
padding: 0px 1rem 12px 1rem;
grid-template-columns: auto 2fr 1fr;
}
}

[flexecommerce]

That did not work if you go to the site on a mobile device

[flexecommerce]

Is there anyway to put the phone number in the announcement bar instead?