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    0
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    547
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    0
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    547
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    547
Rob

No problem!


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
pbeaulieu_9828    0
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

    • 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.
    • Paul
      By Paul+
      I have woocommerce store, product shows title and price fine until reduce screen with on a tablet/mobile phone the price and title gets removed?  Any ideas? 
      Here's an example page: https://thelaptopfixers.com/product/operating-system-re-install/
      Try it on both desktop PC browser then resize to mobile/cell phone size!  
      Thanks
    • kwaoru
      By kwaoru
      Hi,
      I desperately need to deactivate the responsive function on mobile for reasons. It looks so messy with the responsive look on mobile and not navigating or informative at all as it is. 
      I searched for solutions online and tries some of those that I found but nothing worked out. Also I found a previous post on this forum says that this theme pagelines DMS is not meant to be build to deactivate the responsive function... 
      Also tried with widget such as WPtouch to edit the mobile look a little more informative but as I am using "single page" theme on pagelines, the frontpage(main page) never appears on those app.
      Seems like not compatible?
      If there is no way to deactivate responsive function or I'll have to recreate another page just dedicated for a mobile page? or change the theme completely and build a page from scratch?
      I have been searching for this for two days already...
      Could anyone wise and kind out there, please help me?
       
      Thanks,
×