Change href of link for Mobile Device

Question

I have text which currently links to a lightbox. I would like that same link to direct to a seperate location when on a mobile device.

I have absolutely no experiance with JS but i think it might be the solution to this so please make it as simple as possible for me to understand.

The code i'm using the the moment:

<a class="fancybox" href="#contact_form_pop">Contact Us</a>
<div class="fancybox-hidden" style="display: none;">

<div id="contact_form_pop">[contact-form-7 id="3301" title="test"]</div>


</div>

Thanks in advance!

Paul

Answer 1

You can achieve this using media queries.

 @media only screen and (min-device-width: 480px){ #specialLink{ display: inline-block; } } #specialLink{ display: none; } 

So now based on your screen size, the link, identified as #specialLink in my example will or won't show. You can combine this with a different href to target a different modal or whatever you desire.

Answer 2

I would definitely use CSS to do this, see my jsfiddle:

https://jsfiddle.net/guyytmjb/

You control the links and what displays using

display: none;

and

display: block;

around different media queries.

I'd definitely consider having a read of some media query bits on W3 schools or elsewhere as they are extremely useful. Going forward though, asking questions like this and trying to figure out different ways to do things are a great way to learn what is possible and what you can do in different ways, so good job!