http://horgenhonning.net/sharing/flip2/

This link is working perfectly on Android. Image plus centre aligned.

Great! Then I assume it is a Samsung version of Android you're having? Because on that Huawei it's still way off-center.

So flip2 it is then. I'll change the name and link it to the sharing index.

I think there is a case on the first click on mobile that does not register the click until you click again. Then it performs again and again.

I think using touchend will work better but it too created a problem with dragging and then activating everytime you touch it on mobile. So this script will cancel the touchend on mobile if a drag (touchmove) has happened afterwords. This should allow the first click to occur.....(as long as you don't drag).



var dragging = false;
$("body").on("touchmove", function(){
dragging = true;
});
$(".card").bind({
touchend: function(){
if (dragging)
return;
$('.card').toggleClass('applyflip');
},
mouseenter: function() {
$('.card').addClass('applyflip');
},
mouseleave: function() {
$('.card').removeClass('applyflip');
}
});
$("body").on("touchstart", function(){
dragging = false;
});


Should work just the same except on desktop you will just use hover which I think was your original intention.

Dont forget the script tags around it....

Thanks again, Twinstream! Now I have got it sorted as best as I can, and it's working from the 1st click.

(I've got more half-baked stuff here where I'm struggling either with the picture tags or the js, if you like a challenge... )