Increasing the area of a link


#1

Hi Guys,

I recently followed a youtube video to make a clickable link area on this website:

https://listerproperty.co.uk/

The three widgets starting with “Currently Available” the code has worked fine on this to make the whole area clickable instead of just the link.

I have used exactly the same code and done it exactly the same way (or at least I think I have) but on this website:

http://ontargettdesignprojects.uk/

The widgets starting “Who we are” it has not had the same effect, it is only the text that is a clickable link.

Am I missing something here? Because it’s driving me crazy!

Thanks in advance


#2

The problem you have is this is reliant on javascript, it’s not pure html & css.
The actual link is only surrounding the text in the sub paragraph below the heading.
To make the whole box a link the anchor should surround the whole box and there is no need for any javascript.
This may have been different in the past, as an anchor could not contain block elements, but that is no longer the case in html5. It is now valid to wrap block elements in an achor allowing you to make “card” style links with pure html & css.
Note that the layout in the second site actually stands up better than the first when js is disabled.