BUTTON feature in Elementor


#1

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.


#2

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


#3

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:


#4

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

Thank you, Kharis.


#5

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