Suddenly, all links in #content div are not clickable, but I don't see any z-index bug? [closed]

Question

Following a bunch of seemingly harmless plugin updates, I suddenly have a weird bug. All of the links in my #content section are now unclickable, although the links in my sidebar, header, footer, etc. remain all fine. Usually this would imply a CSS z-index bug is overlaying the #content area somehow, but I hadn't changed any CSS.

Here's an example: https://www.reclaimtherecords.org/faq/

Note how the links in the main article are unclickable, but the sidebar links to other pages are fine?

I'm using a slightly-modified child theme, of the Themify Landing theme.

I'm stumped -- help!

Answer 1

That's easy. You have the following CSS rule:

a.themify_lightbox, 
.module-image a, 
.module-gallery a, 
.gallery-icon, 
.themify_lightboxed_images .post a, 
.themify_lightboxed_images .type-page a, 
.themify_lightboxed_images .type-highlight a, 
.themify_lightboxed_images .type-slider a {

    pointer-events: none;  
    cursor: default;
}

This rule applies because body has a class themify_lightboxed_images.

pointer-events: none; is the last thing you want on your links. This basically means that the element doesn't exist to cursors and you can click right through it..

---

If you want to enforce your own rules without changing any theme's styles or add CSS classes to all your links, add the following CSS rule:

a {
   pointer-events: auto !important;  
   cursor: pointer !important;
}

You should generally avoid !important but it will do as a temporary fix. It will overwrite all your links. I suggest to find a better solution as soon as possible.

Just a tip: this is purely a CSS question and should be asked in SO. I hope you know better next time.