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.
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
Thank you very much!
Now it works how I wanted to!