Page 1 of 2 12 LastLast
Results 1 to 10 of 15

Thread: Contact email & tel for my mobile web sit

  1. #1
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,103
    Thanks
    158
    Thanked 3 Times in 3 Posts

    Default 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



    Click image for larger version. 

Name:	6268.jpg 
Views:	94 
Size:	91.4 KB 
ID:	6374

  2. #2
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,488
    Thanks
    1
    Thanked 246 Times in 241 Posts

    Default

    Hi there theremotedr,

    your pages appear to already have tel/email links.

    So why do you need to add to them?

    coothead
    ~ the original bald headed old fart ~

  3. #3
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,103
    Thanks
    158
    Thanked 3 Times in 3 Posts

    Default

    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

  4. #4
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,488
    Thanks
    1
    Thanked 246 Times in 241 Posts

    Default

    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
    Last edited by coothead; 02-10-2020 at 09:37 PM.
    ~ the original bald headed old fart ~

  5. #5
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,103
    Thanks
    158
    Thanked 3 Times in 3 Posts

    Default

    All working fine thanks

  6. #6
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,488
    Thanks
    1
    Thanked 246 Times in 241 Posts

    Default


    No problem, you're very welcome.

    coothead
    ~ the original bald headed old fart ~

  7. #7
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,103
    Thanks
    158
    Thanked 3 Times in 3 Posts

    Default

    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.

    Click image for larger version. 

Name:	Bmw Replacement Car Key Remote Accessories  The Remote Doctor.jpg 
Views:	87 
Size:	15.0 KB 
ID:	6375

  8. #8
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,488
    Thanks
    1
    Thanked 246 Times in 241 Posts

    Default

    Hi there theremotedr,

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

    I will make some amendments for you to try.

    coothead
    Last edited by coothead; 02-11-2020 at 07:34 PM.
    ~ the original bald headed old fart ~

  9. #9
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,488
    Thanks
    1
    Thanked 246 Times in 241 Posts

    Default

    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
    ~ the original bald headed old fart ~

  10. #10
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,103
    Thanks
    158
    Thanked 3 Times in 3 Posts

    Default

    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

Similar Threads

  1. email contact box
    By Johnmd in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 06-21-2013, 04:50 PM
  2. About Contact Finger on Mobile Devices
    By IrvingRami in forum JavaScript
    Replies: 2
    Last Post: 07-24-2012, 09:06 AM
  3. Replies: 5
    Last Post: 08-17-2011, 04:15 PM
  4. Making Email Contact Form Secure
    By Lemon in forum JavaScript
    Replies: 14
    Last Post: 04-09-2010, 12:58 AM
  5. Contact email form
    By Wizzap in forum Looking for such a script or service
    Replies: 1
    Last Post: 03-23-2008, 03:21 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •