Question 202866 in Html Question posted in
Some basic documentation can be found here.

Html – The clickable zone of a slideshow arrow is wider than the icon

On my WordPress development website, I have a slideshow feature for my image galleries. When you click on a image, it starts a slideshow. My issue is with my two white arrows, on the left and on the right. The clickable zone of an arrow is wider than the size of the icon. See image below.

Clickable zone wider than the icon

Here is the URL of my development website

I have tried including my code in this question, but the system tells me "Your question appears to be spam".

The CSS file is "https://dev.francisbegin.ca/wp-content/plugins/gallery-lightbox-slider/css/photobox/photobox.css?ver=1.0.0.39"

The HTML at play is at the very bottom, right before the body closes. The ID of the containing div is "pbOverlay".

Any help would be appreciated. I’m new to stack overflow, please let me know if my question is not alright.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I fixed the issue. Your comment lead me to the solution.

    Instead of a tag, I put a Font Awesome icon and it works.

    Thanks


  2. 0

    This is likely a function of the kerning settings for the font used for the icon. Every character has a bit of space around it to prevent it from bumping up against the others. At 18em, that space is much more noticeable than it might be otherwise.

    If you want to eliminate that space, you may want to consider using an SVG or other image in place of the text content currently in place. However, there’s nothing wrong with giving your users some extra space to land their tap.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search