Hi Don,
First of all, absolutely stunning theme! I recently deployed FKB Pro for my local education community, Jiwa.now, and the card-based UI looks gorgeous and highly professional.
While testing on mobile, I noticed a UX issue regarding the clickable areas on the topic cards. Currently, the clickable zones feel inconsistent. For example, users can click on the very edges of the card to enter a topic, but clicking on other blank areas (like on the right of the avatar row or in the middle of footer) does nothing.
This “hit-or-miss” interaction makes users feel confused, and it often leads to accidental clicks when they are simply trying to swipe and scroll through the feed.
A Suggestion for Future Updates: It would be a UX improvement if the theme could refine this by default—making only the core content (Title, Image, and Excerpt) clickable to enter the topic, while disabling the card’s background to prevent swipe misclicks.
In the meantime, to make the mobile touch experience 100% reliable for my users, I wrote a CSS snippet using a pointer-events “whitelist” approach. It neutralizes the background click entirely and specifically re-enables clicks only on the actual interactive elements.
I thought I’d share it here for anyone looking to refine their touch targets, and perhaps it could be a useful reference for developers:
/* Fix for mobile card click/touch conflicts (Smart Whitelist Approach) */
/* 1. Neutralize the entire card background to prevent swipe-clicks */
.topic-list-item {
pointer-events: none !important;
}
/* 2. Re-enable all native links and buttons (Avatars, Tags, Titles) */
.topic-list-item a,
.topic-list-item button {
pointer-events: auto !important;
}
/* 3. Re-enable image clicks */
.topic-list-item .topic-image,
.topic-list-item .topic-thumbnail,
.topic-list-item img {
pointer-events: auto !important;
cursor: pointer !important;
}
/* 4. Re-enable the entire footer stats area */
.topic-list-item .topic-item-stats,
.topic-list-item .topic-footer,
.topic-list-item .post-activity,
.topic-list-item .activity,
.topic-list-item .num,
.topic-list-item .topic-meta-data {
pointer-events: auto !important;
}
/* 5. Kill any overlapping stretched-link pseudo-elements */
.topic-list-item .main-link::before,
.topic-list-item .main-link::after {
pointer-events: none !important;
display: none !important;
}
Thx!
Leo