• Resolved palmtek

    (@palmtek)


    How do I control the button widths? Is CSS override my only option? The Twitter button is scrunched up on the right.

    The page I need help with: [log in to see the link]

Viewing 15 replies - 1 through 15 (of 19 total)
  • Plugin Author JS Morisset

    (@jsmoriss)

    The RRSSB buttons adjust to the size of the container, making them responsive buttons. 🙂 You can find more information on the RRSSB library here: https://rrssb.netlify.com/

    js.

    It’s not working. I looked at your link, those work. In the link I gave, they don’t. Please don’t close things as resolved unless they are actually resolved. Just because you responded does not constitute a resolution. 🙂

    Plugin Author JS Morisset

    (@jsmoriss)

    The wpsso-rrssb/live/js/ext/rrssb.min.js library script is not getting loaded and/or executed, which is required to adjust button sizes dynamically.

    js.

    My path is different.
    wpsso-rrssb/js/ext/rrssb.min.js
    Should this be excluded from minification by other caching plugins like W3 or FVM?

    <script src=”https://technoogies.com/wp-content/plugins/wpsso-rrssb/js/ext/rrssb.min.js”></script&gt;
    This is one of the last scripts in the header but, the buttons remain unbalanced.

    Right now I have caching plugins disable and cloudflare in dev mode. The script is in the header, but no change.
    I’ve removed and reinstalled the plugin as well.

    Plugin Author JS Morisset

    (@jsmoriss)

    When I first looked at your webpage HTML, the “rrssb.min.js” script was not mentioned – it appears to be included now, so that’s good. 🙂

    There’s seems to be a compatibility issue with the button text being defined as a “display:block” type. I’ve updated the default CSS in WPSSO RRSSB v2.4.2 to use “display:inline-block”. You can use the SSO > Tools > Reload Default Responsive Styles button to reload the latest default CSS after updating.

    js.

    So does the .js control some of the CSS? The last button has a set width.
    Two buttons are like this;

    <li class=”rrssb-facebook” data-initwidth=”33.333333333333336″ style=”width: calc(50% – 21px);” data-size=”230″>

    The last one is thus;

    <li class=”rrssb-twitter small” data-initwidth=”33.333333333333336″ style=”width: 42px;” data-size=”230″>

    • This reply was modified 3 months, 1 week ago by palmtek.
    Plugin Author JS Morisset

    (@jsmoriss)

    Reload the WPSSO RRSSB v2.4.2 CSS as suggested above, and don’t forget to clear the WPSSO cache (as suggested when saving the WPSSO settings).

    And yes, the jquery adjusts the layout as required, setting widths etc.

    js.

    I’m still seeing the same issue. I’ve updated, reset, saved, and clicked your clear cache link. I disabled all caching plugins, Disabled cache on the hosts cpanel, Cloudflare, and cleared browser cache. I’m all cached out 🙂

    • This reply was modified 3 months, 1 week ago by palmtek.

    Different site, same theme. They work here.
    https://pseudosite.com/a-generic-test/

    The twitter button on the first example is getting a set width as 42px but the second example is getting a width of 33.33%. Why? The height is different. Why?
    It does this on every post.
    If there is something in your plugin that allows this interference, don’t you want to figure it out and resolve it?

    Plugin Author JS Morisset

    (@jsmoriss)

    The issue is resolved, but your site is still using the old default CSS:

    .rrssb-text {
        display: block;
        white-space: nowrap;
    }
    

    The new default CSS, used in the second site you mentioned, looks like this:

    .rrssb-text {
            display:inline-block;
            white-space:nowrap;
    }
    

    And yes, as you noticed, using a block container appears to be throwing off the jQuery width calculation.

    js.

    Got it,
    Block, meaning the WordPress editing block or from something else?
    Thanks.

    • This reply was modified 3 months, 1 week ago by palmtek.
    Plugin Author JS Morisset

    (@jsmoriss)

    Block as in “display:block;” shown in the CSS code I included.

    js.

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