How to make the whole blog card clickable

On blog cards there are some spaces that are not clickable, making it harder to actually click on that card. Let’s fix that by making the whole card clickable with :after pseudo element. Currently the code is tested with grid blog type.

Add to Pages › Website Tools › Custom CSS

.blog-item.entry h1 a:after {
content: '';
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}

/* retain clicks on e.g. categories */
.blog-item.entry .blog-meta-section {
  z-index: 2;
  position: relative;
}

In last part we’re making sure that we still can click on additional links like categories.