How to get an image to feature the entire embedded link?

  • Hello,

    My issue concerns our website’s inability to feature images with embedded links that make the entire image clickable. I’ve since been informed that this might be an issue due to our website’s Theme or perhaps there might be a plugin that can resolve this.

    But right now, when we embed links into our images, only a portion of the image is clickable, not the entire image. For example, at the bottom of our homepage (in the Community Corner section) there are two large images, each with embedded links. But when you place your mouse over either of them, the center portion of the image is not clickable. Only the left or right sections of the image are clickable.

    How can this get resolved? Thank you.

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)

  • Hi @bluesunday007

    The issue is that you have a centered div column sitting over top of your image filled with whitespace characters. So it looks invisible but is blocking the clicks to the image with anchor link underneath.

    You should be able to delete this empty column.

    Here’s what it looks like in the page source code: 

    <div class="col-sm-4">
<h1> </h1>
<h1> </h1>
<h1> </h1>
<h1> </h1>
<h1> </h1>
<h1> </h1>
<h1> </h1>
<h1> </h1>
<h1> </h1>
<h1> </h1>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h1> </h1>
<h1> </h1>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h1> </h1>
<h1> </h1>
<h1> </h1>
<h1> </h1>
<h1> </h1>
<h1> </h1>
<h1> </h1>
<h1> </h1>
<h1> </h1>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>
    Thread Starter bluesunday007

    (@bluesunday007)

    Is that code inside the image itself? So if I put on “text mode” to view the image, will that html be visible?

    Thread Starter bluesunday007

    (@bluesunday007)

    How do I remove that coding? Is that hardcoded? I’m not sure I have access to the coding of the website where I could remove that specific code.

    the page is using a custom page template ‘template-home.php’ which you might be able to check and edit from ‘Appearance’ – ‘Editor’…

    it could also be that the page is build using some sort of block builder, in whihc case you might find some editiable content when editing the page…

    part of the problem is that the large clickable images are added into some section with three columns while there should only be one column (from the html output of that section in the browser: <section class="home-section hs-three-column" style="background-color: #252e5b;"> )
    with the other two columns filled with the content mentioned before by @phillcoxon

    ideally, try to contact the developer of your theme for help as you are using a custom made theme.

    Thread Starter bluesunday007

    (@bluesunday007)

    Got it. Thank you, @alchymyth

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘How to get an image to feature the entire embedded link?’ is closed to new replies.