CALL PROMPT in Sydney Pro?

What is the best way to make a Call Prompt in Sydney Pro? I have been trying to use the Button feature in Elementor. But is works marginally. You can see - on my client’s Home Page - with your help - I was able to get the phone number to appear inside the button on mobile devices:

It works marginally well. If the Phone Icon appeared on the same line as the phone number - it would be much better. Close to acceptable.

Unfortunately, that code I used to fix the initial problem only works for buttons on the Home Page. You can see below that a button I created on another page has the same original problem: the phone number appears OUTSIDE of the button on mobile devices.

Is there a better way? To make a CALL PROMPT? That includes the Phone Icon? And looks like a button?

Alternatively, how can I get the phone number to appear INSIDE the button on mobile devices on all pages of a website. I believe strongly in the CALL PROMPT concept, so I want to be able to master this in Sydney Pro.

Here are URLs to the button problem:

http://northvalleyjanitorial.com/

http://northvalleyjanitorial.com/green-cleaning/

Thank you much!!!

Hello,

It looks like this issue is already resolved, is it correct?

Kind Regards, Roman.

No! I am desperate! Thank you!

Hello, here is what I see there:

41 44

Isn’t it what you see on those pages?

Kind Regards, Roman.

Thank you, Roman. I wish that is what I saw on my iPhone. I will have
some other people check on their phones. Thank you.

Roman, I had my dad check on his iPhone 6 in Sacramento California. I
had him take screenshots of both pages (buttons.) He sees exactly what
I am seeing. I will attach the screenshots he made. Thank you for
helping.

Dan

Hello Dan, try to use the following CSS code.

You can add CSS code in Customize → Additional CSS section.

a.elementor-button span.elementor-button-icon.elementor-align-icon-left {
    float: unset;
}

Kind Regards, Roman.

Thank you Roman! Here is the code I previously received:

@media only screen and (max-width: 760px) {

  div[data-id="b0f104c"] {
    background-color: #fff;
    border-radius: 4px;
  }

  a.elementor-button {
    display: block !important;
    text-align: center;
  }
  
  a.elementor-button  .elementor-align-icon-left {
    float: none;
  }

  a.elementor-button *,
  a.elementor-button a {
    display: inline !important;
  }  
}

When I use this code AND the code you just sent - this is the result on my iPhone for both pages/buttons:

When I use ONLY the code you just sent - this is how the pages/buttons view:

So we are getting closer. Is there a way to get the phone number inside the button? Thank you much for helping!

Hello Dan,

Can you please try to disable all additional CSS code and see what happens?

Kind Regards, Roman.

Certainly, Roman. Here is ALL of the Additional CSS code (the site suffers greatly without it:)

@media only screen and (max-width: 1024px) {
.header-contact {
padding-top: 3px;
padding-bottom: 3px;
}
.header-contact .social-links {
margin-top: 0;
}
}

.header-contact,
.header-contact a,
.header-contact .fa,
.has-hero .header-contact,
.has-hero .header-contact a,
.has-hero .header-contact .fa {
color: #000000;
}

.social-links a[href*=“google.com”]::before {
content: ‘\f0d5’;
}

.header-contact .fa,
.has-hero .header-contact .fa {
  color: #000D80;

}

.social-navigation a {
color: #000D80 !important;
}

.social-navigation a:hover {
  color: #ffffff !important;

}

@media only screen and (max-width: 767px) {
header#masthead div.col-md-4.col-sm-8.col-xs-12 {
max-width: 72%;
}

header#masthead div.col-md-4.col-sm-8.col-xs-12,
header#masthead div.col-md-8.col-sm-4.col-xs-12 {
    width: auto;
}

header#masthead div.col-md-8.col-sm-4.col-xs-12 {
    float: right;
    padding: 1px 20px;
}

header#masthead nav#mainnav-mobi {
    left: -215px;
    width: 250px;
}

}

@media (max-width: 767px) {
#masthead {
padding: 5px 0 9px;
}
}

.btn-menu {
line-height: 28px;
}

.mainnav ul.menu .current-menu-item > a,
.mainnav ul.menu .current-menu-ancestor > a {
color: #000D80 !important;
}

#mainnav-mobi ul > li > a {
color: #ffffff;
}

#mainnav-mobi {
background-color: #b5b5b5;
}

#slideshow .text-slider {
animation-delay: 2s;
}

.text-slider h2.maintitle {
background-color: rgba(0,13,128,0.5);
padding-bottom: 20px;
padding-top: 15px;
padding-left: 15px;
padding-right: 15px;
border-radius: 3px;
line-height: 1;
}

.text-slider p.subtitle {
  display: table;
  padding-bottom: 5px;
  padding-top: 5px;
  padding-left: 10px;
  padding-right: 10px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  background-color: rgba(0,13,128,0.3);  
  border-radius: 3px;

}

.page-template-elementor_header_footer .page-wrap,
.page.page-template-elementor_header_footer .page-wrap .content-wrapper{
padding-top: 0;
padding-bottom: 0;
}

html,
body {
overflow-x: hidden;
}

@media only screen and (max-width: 760px) {

  div[data-id="b0f104c"] {
    background-color: #fff;
    border-radius: 4px;
  }

  a.elementor-button {
    display: block !important;
    text-align: center;
  }
  
  a.elementor-button  .elementor-align-icon-left {
    float: none;
  }

  a.elementor-button *,
  a.elementor-button a {
    display: inline !important;
  }  
}

a.elementor-button span.elementor-button-icon.elementor-align-icon-left {
float: unset;
}

.site-info {
font-size: 12px;
}


Here is how the button looks on the three pages where I use it - with ALL CSS Code REMOVED:

The button appears normally. Quite well. But here is how the button looks on all three pages where I have used it - with ALL CSS Code REMOVED:

So I don’t believe it is the excessive CSS Code that is causing this bug. I have reinstalled the above CSS Code on the site. The site is beginning to rank and suffers without the additional code.

Is there another way? I am willing. To create somethings that looks like a button? With the phone icon? Disabled as a link on a computer, but auto-call features on a mobile device?

Thank you, Roman. I am trying.

Hello Dan,

Please check this tutorial, maybe one of the solutions will meet your needs:

Kind Regards, Roman.