BUTTON feature in Elementor

Hello Team!

I am simply trying to create a call prompt - using the Elementor “button” feature. On a computer the button just displays the number.

But on a smart phone the number becomes a call link automatically.

The problem is this: The Button on a smart phone, doesn’t display correctly. Like how it does on the computer rendering.

The WHITE background color for the button actually stops before the phone number (button text) starts.

This is the site I am working on:

http://NorthValleyJanitorial.com

I will attach a couple screenshots too. Is there a way to fix this? So the button works and displays correctly on a smart phone?

Thank you very much.

Hello there,

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    a.elementor-button {
      display: inline-block;
      min-width: 173px;
    }

    a.elementor-button a {
      display: inline;
    }

See how it fixes the issue.

Regards,
Kharis

Thank you Kharis. I added the code as instructed. It DOES make the button larger on mobile devices.

BUT - on mobile devices the actual phone number (button text) is pushed to the right of the button. Instead of being within the button.

Here is a new screen shot:

Is there a better way to do this? It seems this would be a natural use of the button feature.

Thank you, Kharis.

Hello there,

We might need to completely disable number detection as a callable phone number on Safari browser by adding the below snippet to your child theme’s functions.

function sydney_pro_child_disable_number_phone_convert() {
  ?>
  <meta name="format-detection" content="telephone=no">
  <?php
}
add_action('wp_head', 'sydney_pro_child_disable_number_phone_convert', 9999);

If you aren’t running any child theme, to achieve the same purpose, you can use a plugin like Functionality.

Regards,
Kharis

Thank you Kharis, for helping. I specifically don’t want to disable the callable phone number. That is the whole point in the call prompt - to prompt site visitors to call - and as conveniently as possible.

But I do need a way for making the button. That will work across all platforms. I used to be able to do this. With my old theme. Look at this page - on any device:

http://habitacionespuebla.com

The call prompt at the bottom of the page is a viewable and callable phone number on mobile devices. And it views/sizes properly on a computer screen as well.

I must be able to do this with Sydney Pro. What is the best approach? Custom code? To create the call prompt? Instead of using the Elementor button function?

Are you referring to this number on http://habitacionespuebla.com?

Regards,
Kharis

Yes, Kharis. That was my old theme. I am diehard Sydney Pro now, however. Llamada is “Call” in Spanish.

If I have to type Call I can accept it, creating these call prompts. But I would MUCH rather put the Phone Icon as I am attempting to accomplish on the NorthValleyJanitorial.com site.

Thank you, Kharis, for your incredibly timely response!

Hello there,

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (max-width: 760px) {
      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;
      }  
    }

Regards,
Kharis

Thank you Kharis! I inserted that code and it DID change how the button displays on an iPhone, but the phone number is still outside of the white button area.

I read the code and it makes sense that it would work. Here is how it displays:

Please try this code:

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

Regards,
Kharis

Kharis, I think we are getting closer. At least the phone number is now inside the button. Here is how it displays now:

If we can get the phone icon and phone number on the same line I will be satisfied. Also, I am far from being a programmer, but it seems this line of code will dictate that ALL the buttons within any website on the mobile rendering will have to be the same color. If it must be this way I will accept it, but it would be more powerful to be able to create different buttons with different colors within the same site, if possible.

Hopefully that makes sense. I so much appreciate all the help, Kharis. I could NEVER do this without it.

Dan

Good morning team. The last sent code works - to fix the button on mobile devices, but it only affects buttons on the Home Page.

I have added a button - for the same purpose - to prompt calls to my client - on another page. The Green Cleaning page. But I have the same problem on mobile devices. The number appears OUTSIDE of the button. Is there a way this code can be modified - so I can put a “call prompt” button on any page?

Thank you in advance. Here is how the button appears on the Home Page viewed on my iPhone (still not perfect, but at least the number is within the button!)

Here is how the button looks on another page:

The Home page is at:

http://northvalleyjanitorial.com/

The new page with a broke button is:

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

Thank you!