Clickable Phone Number Design Incorrect For Mobile Site

flexecommerce
Shopify Partner
19 0 3

I need the mobile number shown to be in a line and easy to read just like the desktop site below.Screenshot 2024-01-11 112312.png

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

Screenshot 2024-01-11 112318.png

 

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

Replies 5 (5)

codexecom
Shopify Partner
56 9 13

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

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

Need Freelance Shopify Developer, Designer or For further Discussion
Reachout me on whatsapp:+91 919721741072 or , Skype: https://join.skype.com/invite/sDrWRlIVb20I
flexecommerce
Shopify Partner
19 0 3

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

codexecom
Shopify Partner
56 9 13

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;
}

}

Need Freelance Shopify Developer, Designer or For further Discussion
Reachout me on whatsapp:+91 919721741072 or , Skype: https://join.skype.com/invite/sDrWRlIVb20I
flexecommerce
Shopify Partner
19 0 3

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

flexecommerce
Shopify Partner
19 0 3

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