[Resolved] click to call button code for mobile site

[Jack Heape]

Could I please get the code so that I can have a “click to call” button on the mobile site? Thanks

[Tom]

For sure!

First, add this CSS:

.show-on-mobile {
      display: none;
}

@media (max-width:768px) {
      .show-on-mobile {
            display: block;
      }
}

Then, add this HTML wherever you want the button to show up:

<div class="show-on-mobile">
      <a class="button" href="tel:123-456-7890">Call me!</a>
</div>

Of course, you’ll have to adjust the phone number.

Hope this helps 🙂

[Jack Heape]

Great thanks!

[Tom]

You’re welcome! 🙂

[Jack Heape]

No problem on putting the code on the css, and the html works fine and shows up. Problem is it also shows up on the pc browser as well. See http://divingservicecharleston.com
I need the “call me” button to only be on the mobile site, on the initial screen before any scrolling is required. Anyway to code that? and also make the button a better color, like green or red?
Thanks

[Tom]

It doesn’t look like you added the CSS provided here: http://generatepress.com/forums/topic/click-to-call-button-code-for-mobile-site/#post-105086

As for the button, you can adjust the colors with CSS as well:

/* Initial button state - replace #whatever with your desired color */
.button,
.button:visited {
      background: #whatever;
      color: #whatever;
}

/* Button color on hover */
.button:hover {
      background: #whatever;
      color: #whatever;
}

[Jack Heape]

I added this at the end of the current css file after the click to call button code.

/* Initial button state – replace #whatever with your desired color */
.button,
.button:visited {
background: #04B404;
color: #000000;
}

/* Button color on hover */
.button:hover {
background: #04B404;
color: #000000;
}
It did not work.

[Tom]

Looks like you added your custom CSS to the parent stylesheet.

Instead, use a child theme or a custom CSS plugin: http://generatepress.com/knowledgebase/adding-css/

[Author]

Posts