Overlayed text is blocking image link

Site URL: https://www.tleighton.com/

Hi,

I am having an issue where text overlayed on an image is blocking the image links. I have tried making the text the same link and coding out the underline, but the is still an area of the text box that blocks the link. Is there code to make the whole image clickable whilst ignoring any text?

example - https://www.tleighton.com/geology-photographic-series

Thanks

7 hours ago, tuanphan said:

You can use this to Website Tools > Custom CSS to fix problem

body.homepage article .fe-block:has(.html-block a) {
    pointer-events: none;
}

 

Thank you, that has worked well for the home page. I also need to apply it to other relevant pages  for example

https://www.tleighton.com/geology-photographic-series

Do I proceed one by one with collection ids? I am also currently adding links to the text and the image, then using  text-decoration: none !important; to remove the underline of the link. Is there a more elegant way of doing all of this?

Thanks very much for your help! 

On 10/9/2024 at 6:35 PM, TomL said:

Thank you, that has worked well for the home page. I also need to apply it to other relevant pages  for example

https://www.tleighton.com/geology-photographic-series

Do I proceed one by one with collection ids? I am also currently adding links to the text and the image, then using  text-decoration: none !important; to remove the underline of the link. Is there a more elegant way of doing all of this?

Thanks very much for your help! 

Just repeat the code

replace

body.homepage

with 

Page ID

Use this tool to find Page ID

This is format of Page ID (red arrow)

Thats great, thank you!