Checkboxes not working on mobile (heavily modified)

[DannyVarley]

Hi Guys,

I am having real trouble trying to work out an issue with my template. The template is a heavily modified purchased one so I cannot get in touch with the author.

So my main issue is that on mobiles I cannot select check boxes well. If you take a look at the attached picture you can see that it seems that on mobiles the elements "iCheck-Helper" and "checkboxLabel" are in the way? so if you try and tap a little away from the checkbox you can get it to work. I have coloured the newsletter select red the red is what cannot seem to be tapped, but if you try tap just outside you can get it to work.

This is driving me crazy and I am hoping someone can see the reason why? I believe it is either some wrong CSS or a js file gone wrong?

you can test this out for yourself on the bottom of the create account page https://kitchenwarehouseltd.com/create-account with the checkboxes.

[Design75]

There is an <ins> tag, not sire what it is, never seen it before. if i remove those tags from the code with my developer tools in chrome, the radio buttons are working.

<div class="iradio_minimal checked" style="position: relative;">
<input type="radio" name="email_format" value="HTML" checked="checked" id="email-format-html" style="position: absolute; visibility: hidden;">
<ins class="iCheck-helper" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"></ins>
</div>

[DannyVarley]

I tried to play around with the ins tag and couldn't replicate it working, I then started to look into the iCheck js plugin that seems to be running the strange textboxes. I uploaded the latest iCheck javascript file to the site and it seems to have fixed the problem so I think my issue was with an outdated javascript plugin.

Thanks for all your help I've been tearing my hair out over this one!

[dbltoe]

the ins tag would normally be used when trying to "show" a change. It should be used in conjuction with a del tag. Just another way of doing what ZC does with sale prices.

<p>The current price is <del>$24.95</del> <ins>$19.95</ins>!</p>

would show as -- The current price is $24.95 (with a line through it) $19.95(underlined)!
Admittedly an odd way to do things (especially in your case) but I've seen some pretty strange "adjustments" in store-bought templates.