Changing Reaction Button Size Prevents React

  • I first want to say this is an incredible plugin. ??

    When changing the following setting from 64 to 32 I can no longer react to posts or images:

    Reaction Settings > Graphic Settings > Select size for reaction buttons

    When attempting to react to an image/post the react icon moves up but does not count the vote. When changing back to 64 it works right away. This happens with both a mouse and touch screen. I’ve tried different posts, comments, images, and users. It turns out it’s because the counter itself is in the way. If I click the very top of the reaction the question mark cursor goes away and I can vote. Using inspector tool you can see how most of the reaction is covered from being clickable:
    https://photos.app.goo.gl/gb5VVGqq5F6aC7ht6

    Ideally one could click anywhere within the reaction icon to count the vote.

    Warm regards,

    Josh

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author Daniele Alessandra

    (@danielealessandra)

    Hi Josh,

    Thank you so much for your kind words and for using DaReactions! ??

    The issue you’re experiencing happens when the count badge overlaps the reaction icon, making most of the icon unclickable. This overlap is particularly noticeable when reducing the reaction button size, as the badge doesn’t scale proportionally.

    To fix this, you can adjust the size and positioning of the count badge using custom CSS. I’ve detailed the steps in this support article:

    How Can I Resize the Count Badge?

    In short, you can resize the badge by modifying its font size and adjusting its position to ensure it no longer blocks the reaction icon. For example, you might add this CSS to your site:

    div.da-reactions-container div.reactions div.reaction .count {  
        font-size: 0.3em;  
        position: relative;  
        top: -5px; /* Adjust as needed */  
        background: transparent; /* Optional, for better appearance */  
    }

    This can be added via Appearance ? Customize ? Additional CSS in your WordPress admin. Once applied, you should be able to click anywhere within the reaction icon to cast your vote.

    Please let me know if this resolves the issue or if there’s anything else I can assist with!

    Warm regards,

    Daniele Alessandra

    Thread Starter Josh Journey

    (@ljosh)

    Thank you so much Daniele! ?? The CSS fix you posted indeed fixed reactions. I modified it a little for better styling and counter readability which looks great:

    div.da-reactions-container div.reactions div.reaction .count {
    font-size: 0.8em;
    position: relative;
    top: -47px;
    background: transparent;
    left: -13px;
    }

    Lots of great documentation too. Just looked through most articles that are quite informative. I absolutely love that images are supported too along with a portable shortcode. At first I used the following shortcode which created two separate reactions on an attachment page that where independent of each other:
    [reactions id="3" type="image"]

    I suggest adding in the docs the following:
    https://da-plugins.helpscoutdocs.com/article/39-add-reactions-to-content-body-using-shortcodes

    Add to an attachment:
    [reactions id=”3″ type=”attachment”]

    This wasn’t immediately obvious but was an easy fix for me. The portable reactions will be very helpful for adding to things like a lightbox. Wishing you a wonderful day.

    Warm regards,

    Josh

Viewing 2 replies - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.

Tags