Contact email & tel for my mobile web sit

Morning,
I have seen something on a website which i would like to replicate for use whilst only viewing on a mobile item.

This is the url for the site that i have seen it on.
https://www.solidfuelappliancespares...-coalbrookdale

This is my url
https://www.theremotedoctor.co.uk/index.html


I have attached a screen shot of the item in question.
I would only require the mobile & email part of it.

Please advise where i need to add the code in question on my page,i can then edit the phone number & email then add to all my other pages.
Many thanks



Attachment 6374

Hi there theremotedr,

your pages appear to already have tel/email links.

So why do you need to add to them?

coothead

Some people advised me they could not navigate ????

I thought that these would be easier for the people in question.

Happy New Year by the way

Hi there theremotedr,

well, if you want to test the code that was used on
the site to which you linked, then add this code...

Code:

---


 <div id="tel-email">       
  <a href="tel:07899 827427">07899 827427</a>         
  <a href="mailto:theremotedr@gmail.com">Email</a>
 </div>       


---

..just above this line....

Code:

---


</footer><!-- #end footer area -->


---

Here is the CSS that I used for my test...

Code:

---


#tel-email {
    display: none;
        padding: 1em 0;
        background-color: #036;
 }
 
#tel-email a {
        margin: 0 0.5em;
        font-size: 1.5em;
    color: #fff;
        text-decoration:none;
 }
 
#tel-email a[href^="tel"]::before {
  content: '\0260e ';
}

[href^="mailto"]::before {
  content: '📧 ';
}

@media ( max-width: 30em ) {
#tel-email {
        display: block;
  }       
 }


---

It will display the code at widths less than 30em (480px).
This value and all the others may be edited to suit your
actual requirements.


Note:-

As I do not have a mobile device I have not, obviously,
been able to test the telephone functionality.

coothead

All working fine thanks

No problem, you're very welcome. ;)

coothead

Hi,
Looking through all the pages there is one which has a odd symbol,see screen shot.

This is the page in question
https://www.theremotedoctor.co.uk/ac...llto=selection

Do you spot a reason for this /

Thanks
Ive changed it for a copy off a working correctly page but still the same.

Attachment 6375

Hi there theremotedr,

I am surprised that it worked at all. :confused:
The CSS code that I gave you was incorrect.

I will make some amendments for you to try.

coothead

Hi there theremotedr,

This CSS that I gave you...

Code:

---


[href^="mailto"]::before {
    content: '�� ';
 }


---

...should have been...

Code:

---


#tel-email a[href^="mailto"]::before {
    content: '\02709 ';
 }


---

Try that that and see if it effects a cure.

I notice that you have changed "email" to "EMAIL ME" in the HTML.

This causes problems at widths less than 23.75em (380px) as
"EMAIL ME" starts to go to the line below.

I would suggest that you use this amended CSS...

Code:

---


#tel-email {
    display: none;
    padding: 1em 0;
    background-color: #f00;
 }
 
#tel-email a {
    margin: 0;
    font-size: 1.25em;
    color: #fff;
    text-decoration:none;
 }
 
#tel-email a[href^="tel"] {
    margin-right: 1em;
 }
 
#tel-email a[href^="tel"]::before {
    content: '\0260e ';
 }

#tel-email a[href^="mailto"]::before {
    display: inline-block;
    vertical-align: bottom;
    content: '\02709 ';
    font-size: 1.5em;
 }

@media ( max-width: 30em ) {
#tel-email {
    display: block;
  }       
 }


---

coothead

Hi,
that sorted it & ive then used the advised css mentioned above.

Can you show me please which part of the code would put a space between the PHONE & 07899 and also a space between the envelope & Email
Just so i can see what its like with thanks