Button in Mobile Browsers Difficult to Select

I am working on a website (ID - 620675) and from the main homepage we have a “Book Now” button that should open an overlay. This works fine in desktop and tablet browsers but on some mobile devices (especially Samsung Galaxy’s) users are complaining that they press the button and nothing happens or that they have to select multiple times until eventually the overlay appears.

It seems like the “selectable” area is the issue and very tiny when one user demonstrated this to me. Is there a fix, can an admin take a look and help?

Anyone else had this happen?

Hi @Ian_Wilson,

I found the issue. You have a negative top margin for the container below the button and the element is overlapping the button on smaller devices:

You have to adjust he top margin for this element for the mobile viewport.

Thanks for this Martin. I now understand completely. I can see the -150px margin on a browser, but editing the element doesn’t seem to do anything. I’ve saved a back and playing around with it. It was the boxes element by the way.

Replying to my own post - think I have now fixed, it. A mixture of padding and margins all over the place! Thank you so much, this was a good lesson, to use a browser and look for overlaps - I hadn’t thought of that.

Your help is greatly appreciated.

1 Like

Hi @Ian_Wilson,

you are welcome and thank you for sharing the solution with us.