Join Morten Rand-Hendriksen for an in-depth discussion in this video Solving the common "anchor doesn't fill the card" problem, part of Advanced Responsive Layouts with CSS Flexbox.
- View Offline
- 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 here, and down here.…And the other is, if you want to highlight the link…
This course shows how to use flexible boxes to create advanced responsive layouts. Morten Rand-Hendriksen takes the viewer on a tour of Flexbox and provides actionable code snippets that can be implemented safely in almost any website. He puts it all together in a holy grail site complete with card-based layout, mixed content menus, and interactive components that provide visitors with choices about what they see.
- Creating Flexbox-powered menus
- Building a responsive card layout
- Marking up and styling the holy grail layout
- Changing displays
- Showing and hiding the sidebar
- Animating content