not working only on cellphones

Question

This code works on all desktops and tablets, in every browser, but for some reason I cant find, it is not working on cellphones, android or apple! I cannot even select the text on cellphones..

<div class="inner-content block-content-style-2">
<a href="index.php/fr/services-fr/moule">
<div class="icons-molding"> </div>
</a>
<h3 class="title">Conception</h3>
</div>

I tried moving the href to a couple of place, but didnt change anything, but anyways, even if it is not a link, i should be able to select the text when using a cellphone
I tried to add a href inside the h3 tag for mobile to click on it, but it is not working either.
you can try it live here: http://www.qualiplast.com
On desktop or tablet, it works just as intended, but not on any cellphone.

Thanks for helping me out.

You're trying to put a `
` inside an ``? Why? If that's supposed to be an icon, make it a ``. — wchargin, Jan 19 '15 at 19:58
You should make the link within side the div if you plan on doing this, check out this: http://stackoverflow.com/questions/796087/make-a-div-into-a-link — Asheliahut, Jan 19 '15 at 20:00
I'd just note that it's perfectly valid (in HTML5) to nest a block-level element within an `` element (so long as the `` itself isn't placed in an invalid position). — David Thomas, Jan 19 '15 at 20:01
The code posted does not work anywhere in any reasonable sense, since the link text is blank. What you are referring to as “working” in some environments must involve other code, like CSS and JavaScript. Add the relevant code to the question, and make sure it actually demonstrates the problem. — Jukka K. Korpela, Jan 19 '15 at 20:27
@WChargin, [`` elements have a transparent content model, which means that they may contain `
` descendants](http://www.w3.org/TR/html51/single-page.html#the-a-element). — zzzzBov, Jan 19 '15 at 20:31
Thanks alot @Geohut I got it working with the link you gave me! — Marc-Antoine Musson Du Moulin, Jan 19 '15 at 21:43
Here the problem was a style overflow: auto. Maybe it help others. — Fernando Kosh, Dec 18 '17 at 16:07

score 1 · Answer 1 · answered Jan 19 '15 at 20:27

1

There is a div with an id of 'avatar-body-middle-block' that is appearing above the links on mobile, and preventing them from being clickable. Remove (or more likely hide) this div on mobile and the links will work.

answered Jan 19 '15 at 20:27

rwacarter

1,915
1
14
25

Actually I think you can remove that `div` altogether as it never seems to have any content in it – rwacarter Jan 19 '15 at 20:29

score 0 · Answer 2 · answered May 11 '18 at 09:45

I faced the same problem. Here's how I solved it in my case.

I tried inspecting on the 'a href' element. Turns out that some other element shows up in the developer console. After some pondering, I realized that some other div element was showing up above my link.

After reading through the css styling for the overlapping element and disabling the overlapping css command, the link started working for me. (float: none had to be deleted in my case, from an overlapping div)

Hope this helps someone else out there

not working only on cellphones

2 Answers2