Just working through the portfolio exercise. Am trying to use grids to make some links, with thumbnails, to my previous 4 exercises.
Initially I had a 2x2 grid (ignoring the heading), and each grid cell was an anchor element. I managed to align the image and title nicely like this. However, the whole grid cell was “clickable” I wanted the image and title to be the only things clickable so I created another div around the anchor element, trying to achieve something like shown in the image below. ie i want the red box to be what I can click on, rather than the whole blue box.
Anyway I tend to add borders to stuff when I’m building up a page so i can visualise whats happening better when I make changes. Look whats happened when I apply a red border the anchor element… What the hell is going on?!
I also can’t figure out how to align the items centrally anymore. Nothing seems to work.
https://codepen.io/AlexofSmeg/pen/bjYzBV
Much appreciated if someone can tell me exactly how to make this look like how i want it in the attached image.