different phone number on mobile version?

Community Forums Forums General Discussion different phone number on mobile version?

This topic is: not resolved

This topic contains 6 replies, has 3 voices, and was last updated by  fotodog13 1 year, 2 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #38637

    fotodog13
    Participant
    Post count: 50

    Hi All, I am using the latest version of studio press, wordpress and the executive theme. I have made it responsive. The client I have done the site for tracks everything, I mean everything. They want to run a different phone number for tracking purposes on the mobile versions of the website to see where their leads are coming from.

    I know this would be very easy to do with a true mobile site, but not sure if its really possible to do with a responsive design type of site.

    I am wondering if it is possible to write some kind of script, or conditional statement that would do this – example if device is less that 960 pixels wide the content that appeared ( phone number ) would be x not  y.

    If anyone has any thoughts or suggestions on how to do this , hate to have to redirect this site to a mobile site just for a phone number issue as it displays perfectly on different size devices.  Had I known about this at the outset of the project I would have figured a true mobile site into the scheme of things instead of thinking if using a responsive design method.

    Doing this is way beyond the scope of my skills, so at this point I am looking at trying to find out if it is possible and if so hoping that the information I find out here might help me in knowing what  other considerations I need to be aware of if I need to hire a programmer to do this for me.

    As always thanks to anyone that posts a suggestion here.

    • This topic was modified 1 year, 2 months ago by  fotodog13. Reason: forgot tag
    • This topic was modified 1 year, 2 months ago by  fotodog13. Reason: forgot tag
    http://aielloenergy.com
    #38649

    Ted
    Participant
    Post count: 48

    This wouldn’t be total fix for you, but might satisfy the client. (probably not, but here goes…)

    I’ve been setting it up so when a mobile responsive site is being viewed on a smart phone, a prominent button is displayed on the home page saying something like, “Click to call now!”  It won’t show up on desktops, laptops or even tablets/iPads. Only on smartphones.

    I created a new widgeted area called home-mobil-call, and in the css I would add this:

    #home-mobile-call {
    display: none;
    }

    Then add the styling in the @480 section of the css.

    You can go here to see an example of it on my web biz site: http://imageperceptions.com/responsive/

    Like I said, it’s not the perfect solution for your deal. People  ignore the click-2-call button and transcribe the other phone number on the site. Don’t know why they would, but the client might bring up that scenario.

    Hope this helps, :)

    • This reply was modified 1 year, 2 months ago by  Ted.
    • This reply was modified 1 year, 2 months ago by  Ted.
    #38651

    ryantownley
    Participant
    Post count: 9

    You can do this by using (2) different div classes in the header widget area and displaying or hiding via CSS and media queries. That is the gist of it. Here is some real basic code that might help.

    Try this in your header widget…

    <div class=”phone”>(555) 555-5555</div>
    <div class=”phone-mobile”>(666) 666-6666</div>

    This in your style sheet…

    .phone-mobile {
    display: none;
    }

    @media only screen and (max-width: 480px) {
    .phone {
    display: none;
    }

    .phone-mobile {
    display: block;
    }
    }

    • This reply was modified 1 year, 2 months ago by  ryantownley. Reason: removed preformatting
    • This reply was modified 1 year, 2 months ago by  ryantownley. Reason: removed preformatting
    #38654

    Ted
    Participant
    Post count: 48

    Geeez, why didn’t I think of that! That’s perfect, Ryan!

    #38657

    ryantownley
    Participant
    Post count: 9

    Hey, I liked your “Tap to Call” angle, Ted! I dabbled with that just recently using a link class for the mobile number instead of a div but otherwise pretty much the same CSS in case you want to add that functionality, fotodog13…

    <a class="phone-mobile" href="tel:5555555555">Tap to Call (555) 555-5555</a>

    Example: http://websiterevitalize.com

    • This reply was modified 1 year, 2 months ago by  ryantownley.
    • This reply was modified 1 year, 2 months ago by  ryantownley.
    #38659

    Ted
    Participant
    Post count: 48

    Very nice, Ryan!

    #38722

    fotodog13
    Participant
    Post count: 50

    Brilliant ! As I started reading this I started saying to myself – why didn’t I think of that- thanks so much- will try this, Ryan might hit you up with some code tweaking if I can with what you posted here.

    Thanks again guys- this is much more than I was hoping for

     

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.