From the course: Advanced Responsive Layouts with CSS Flexbox

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Solving the common "anchor doesn't fill the card" problem

Solving the common "anchor doesn't fill the card" problem - CSS Tutorial

From the course: Advanced Responsive Layouts with CSS Flexbox

Start my 1-month free trial

Solving the common "anchor doesn't fill the card" problem

“

- All right, with Flexbox, we've been able to create this card based grid layout that looks and functions pretty much exactly as we would expect. However, there is a small hidden problem with what we have right now that we need to address, because it's gonna come up when you start working with this on your own. If I take my mouse, and I hover over one of these items, let's say this tall one here, you'll see that anywhere I hover my mouse, there's a clickable area, because, as you remember, inside the article we started with an anchor tag, and then all the content is inside that anchor tag. However, if I take my mouse and move it over to one of these shorter ones, and put my mouse down past the content, you'll notice that all of a sudden, the clickable area ends. That's because the link that's within the article is not currently scaling to fit the overall content. This has two noticeable consequences. One is that there's an area within some of these links that are not links, like down…

Contents