This tutorial is pretty straightforward, but it’ll require us to be very precise about the selector(s) we’ll be using and will include additional tweaks to one or two additional containers for the final result to work the way we want it to:

01:00 - Overview of the Auto List section options needed

First of, we’ll take a minute to look through the different settings that need to be in place to make sure this customization works once the code is in place. There’s not much to it, but it’s important to set everything correctly.

02:06 - Breaking down the CSS trick to make the whole Auto Layout items clickable

Next, we’ll jump into the code. We’ll look at the logic behind what we’re doing (spoiler alert: we’ll be creating a clickable overlay with a pseudo-element) to be able to build a selector that works for what we need.

04:06 - Creating the clickable overlay

Once our selector is all set, we’ll create the actual overlay and tackle a very common positioning/sizing issue that 80% of the time pops up when working with absolutely positioned elements.

08:55 - Fixing thumbnail image issue

Last but not least, we’ll take care of a weird issue that the thumbnail will suddenly develop once the overlay is on top of it.