different phone number on mobile version?

[fotodog13]

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.

http://aielloenergy.com

[Ted]

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, 🙂

[ryantownley]

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;
}
}

[Ted]

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

[ryantownley]

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

[Ted]

Very nice, Ryan!

[fotodog13]

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

 

[Author]

Posts