CALL PROMPT in Sydney Pro?

[dan2]

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!!!

[roman]

Hello,

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

Kind Regards, Roman.

[dan2]

No! I am desperate! Thank you!

[roman]

Hello, here is what I see there:

Isn’t it what you see on those pages?

Kind Regards, Roman.

[dan2]

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.

[dan2]

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

[roman]

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.

[dan2]

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!

[roman]

Hello Dan,

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

Kind Regards, Roman.

[dan2]

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.

[roman]

Hello Dan,

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

How to Add a Click-to-Call Button in WordPress (Step by Step)

Kind Regards, Roman.