Only image 'clickable' - Tribute Page

Only image 'clickable' - Tribute Page
0.0 0

#1

Hi guys! I started my journey with freeCodeCamp few days ago and I’m ending my Tributes Page.
I got one problem I cannot solve with Google.

Here’s link: https://codepen.io/Reverian/pen/OZMQQE

On the page’s bottom there is ‘row’ with 4 images in 4 “clickable” colums.
What can I change to make “clickable” only images not whole columns.


#2

The reason the entire column is linked is because the image is a block element with a margin. The link is enclosing the entire element along with its margin. I’m guessing you have styled the images this way because you want them to be centered in the columns. If you set the display property to inline for the images instead (or just don’t set it to block since inline is the default for images), only the images will be linked.

You can still center the images by setting text-align: center on the image containers if they are display: inline.


#3

Thank you very much! :star_struck:
Now it works how I wanted to! :wink: