Jump to content

Archived

This topic is now archived and is closed to further replies.

pbeaulieu_9828

How to create Mobile Phone and Email Icons?

Recommended Posts

pbeaulieu_9828

I am using pagelines framework. I built my child theme. Being responsive, everything renders as it should on mobile devices. The client though wants icons on the bottom of a smartphone to do one touch phone dialing and email. Any idea how this is done within the framework. When I was building adaptive sites, we would create a css specifically for mobile devices, create a fixed footer with block level elements and then just add the code to be able to place a call when one hits the icon. I have no idea how to do it from within pagelines. Here is how my code used to look with an 'adaptive site'.

 

<footer class="group">
      <p>1111 Smith St. Anywhere, CA 10000 • 415-555-1200</p>
      <nav id="bottomnav">
            <ul>
                  <li id="fbmenu"><a href="/">menu</a></li>
                  <li id="fbaboutus"><a href="aboutus.html">about us</a></li>
                  <li id="fbcallus" class="handheld"><a href="tel:18005555555">call us</a></li>
                  <li id="fbmap"><a href="map.html">map</a></li>
            </ul>
      </nav>
</footer>

Share this post


Link to post
Share on other sites
Rob

Hi, 

 

Please see: http://support.pagelines.me/docs/miscellaneous/font-awesome/

 

Instead of <li id="fbcallus" class="handheld"><a href="tel:18005555555">call us</a></li> you can use

<div style="font-size: 24px;">

<i class="icon-phone"> <a href="tel:18005555555">call us</a></i>

</div>


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
pbeaulieu_9828

Rob,

   I guess the question is, if I am not using a separate style sheet for mobile, where would I put this in the html so that it only shows up on a smartphone?

Share this post


Link to post
Share on other sites
Rob

Hrmmm.  Now that's a question.

 

My best answer is, that our Browser Specific CSS plugin would help.

 

Follow this article:  http://forum.pagelines.com/topic/28568-framework-store-free-products/

 

Locate the browser-specific-css plugin in the list of free items.  Install it as a plugin, the old-fashioned way, and activate it.  The plugin should give you the code for mobile devices and for standard browsers alike. 

 

If we change the code a bit, so that the <i class="icon-phone"></i><a href...., you could, in theory, set some custom code so that for IE, Safari, Chrome, Firefox, etc (the computer browsers) you can apply .icon-phone {display: none;}

That would hide the icon from the standard browsers.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Rob

No problem!


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
pbeaulieu_9828

Moderator, what are you talking about? Even Rob did not have a solution, I was being nice. Work on your product so people do not ask silly questions on things that should be included in the framwork or at least a paid plugin. Seriously a call button on a mobile site?!! You don't have the foresight to include those types of buttons or instructions?

Share this post


Link to post
Share on other sites

  • Similar Content

    • stijnxo
      By stijnxo+
      Is there a way to disable the responsive function of your iBoxes?
      I do not want all iBoxes underneath each other on mobile, is there a way to fix columns or group boxes?
      I use them for small links and want them to stay next to each other, see attachment
      Please let me know.



    • dwpoyner
      By dwpoyner+
      Not sure exactly what is causing the issue. For some reason, why you view my site on mobile, the menu does not show up. It will pop up, but it is black. You can check it out here: http://dev.caryfbc.org. I'm also attaching a screenshot where I shrunk my browser down. Any suggestions?

    • lionel1
      By lionel1
      Hi,
      I use on my home page " impulse module " but when i look on my iPhone the image is cut and not responsive .
      i only have this problem with this module not with the other one .
      thanks for ur help
      website / www.elonakane.com 
      Lionel 
       
    • kwaoru
      By kwaoru
      Hi,
       
      I have been using DMS and pagelines.
      I am facing to a huge trouble with the appearance of one of my page on mobile (smart phones) built with pagelines.
      However I haven’t come to any solutions to organise either edit the appearance of mobile view to look neat or deactivate the responsive function. 
      Now it looks totally messy on the phone...
       
      1. Is there any way to edit the appearance of the mobile version (responsive theme)?
      2. Is there any way to deactivate responsive function?
       
      If I could receive support from you to go thorough this process I would be happy to be a pro member. 
       
      Looking forward to hearing from you.
×