Button (almost) not clickable on mobile

Hi,

I have a page with a bunch of (X shortcode) buttons that fire a javascript code.

Weird thing is button doesn’t work on mobile, I have to click like one millimeter below the button and sometimes it works, so I know it’s not the JS itself that’s an issue, probably the button somehow.

Login details hidden below.

Hello There,

Thanks for writing in! Regretfully we could not check your site because there seems to be a problem with your server. Please contact your hosting providing immediately.

By the way, in your next reply, please also include your JS code. I am suspecting that you are only having the click events and not the touch events. The properly way of getting the buttons clicks with JS is something like this:

(function($){
  $('.my-button').on('click touchend', function(){
    // do some stuff when clicked or touch
  });
})(jQuery);

Hope this helps. Kindly let us know.

Bad gateway was a temporary glitch.

Hello There,

I have logged in and saw your JS code. Your code will only work in desktops and not in mobile. Please update your code the jQuery way. You can have something like this:

(function($){
  $('#15').on('click touchstart', function(){
    $('#15min').css('display', 'block');
    $('#30min').css('display', 'none');
    $('#60min').css('display', 'none');
    $('#buy').css('display', 'none');
  });
})(jQuery);

We would loved to know if this has work for you. Thank you.

Yes it did thanks, I had a guy work on it based on your first response and the code looks like this, for anybody needing it :

var book15 = function(){
$('#15min').css('display', 'block');
$('#30min').css('display', 'none');
$('#60min').css('display', 'none');
$('#buy').css('display', 'none');
document.getElementById('book').scrollIntoView();

}

$(document).ready(function(){
$(’#15’).on(‘touchstart click’, book15);
});

Not far from yours.

Needed to add the scrollIntoView() as the anchor wasn’t…well, scrolling into view.

Glad we could help and thank you for sharing.

Cheers!