Only follow a link within a certain media query

Question

I have a div with some text in it and a link around it.

<a href="mypage.html">
   <div>
      Text goes here ...
   </div>
</a>

However, I only want the link to work at a certain page width, namely less than or equal to 625px. Something like this:

a {
   link-works: no;
}

@media (max-width: 625px){
   a {
      link-works: yes;
   }
}

The code above is obviously just an illustration – but can this be done with CSS? Or will I need a javascript solution?

What do you mean by "follow link"? I don't understand the expected behavior, maybe [pointer-events](https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events)? — Alon Eitan, Nov 24 '19 at 18:01
You are looking for this: https://stackoverflow.com/questions/6727659/is-it-possible-to-make-an-html-anchor-tag-not-clickable-linkable-using-css — Snuwerd, Nov 24 '19 at 18:02
@AlonEitan I mean if the link should work or not. If page width is > 625px, I want nothing to happen when you click on the link. If it is < 625px, I want the link to work as normal. — Run_Script, Nov 24 '19 at 18:03

score 5 · Accepted Answer · answered Nov 24 '19 at 18:06

5

You could use property called pointer-events

a {
   pointer-events: none;
}

@media (max-width: 625px){
   a {
      pointer-events: all;
   }
}

answered Nov 24 '19 at 18:06

2

The pointer-events property defines whether or not an element reacts to pointer events. :) – Shota Topchishvili Nov 24 '19 at 18:36

1 Answers1