Siteorigin adds border bottom color to image hover

  • Resolved shaunbowen

    (@shaunbowen)


    2 years, 2 months ago

    I’ve just noticed that the latest version of Page Builder is automatically adding a style of border-bottom-color: rgba(0, 0, 0, 0); to the image widget on hover. This is problematic as I now have to override this with an !important tag in my CSS if I want to change the border style on hover. Please see the linked page for an example.

    I have checked a number of sites using the SO Image Widget and it seems to be the same on all of them.

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

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Support Andrew Misplon

    (@misplon)

    Hi Shaun

    Thanks for the link.

    I’m struggling to locate a border-bottom declaration targeting the img tag in its normal or hover state.

    I can see your normal state declaration:
    border: 1px solid #dddad5;
    And your hover state declaration:
    border-bottom-color: inherit!important;

    The SiteOrigin Widgets Bundle is adding the following declarations targeting the so-widget-image class:

    display: block;
    max-width: 100%;
    width: 100%;
    height: auto;

    Thread Starter shaunbowen

    (@shaunbowen)

    Hi Andrew. Please use the inspector and apply a hover to the <a> link that contains the <img> item. Then you will see an inline style applied to the <img> part of border-bottom-color: rgba(0, 0, 0, 0); at the top of the styles, above the CSS.

    Edit: I have disabled my bottom border color override so you can see it on the actual display of the widget.

    • This reply was modified 2 years, 2 months ago by shaunbowen.
    Plugin Support Andrew Misplon

    (@misplon)

    Hi Shaun

    Here is my view. The a tag is set to hover – I’m inspecting the img tag.

    https://siteorigin.com/wp-content/uploads/2023/01/Screenshot-2023-01-16-at-14.31.55.png

    Thread Starter shaunbowen

    (@shaunbowen)

    Hi Andrew

    How weird, this is the result I get (latest Chrome Browser):

    https://www.americansmile.co.uk/wp-content/uploads/2023/01/Screenshot-2023-01-16-151209.png

    I don’t actually even need to apply the hover to it.

    Thread Starter shaunbowen

    (@shaunbowen)

    Actually I have further info – it only happen when logged into a site!

    So something to do with the admin view.

    Plugin Support Andrew Misplon

    (@misplon)

    Thanks for the update. It’s possible a third-party plugin is adding the inline style. If you have a moment, perhaps try a quick baseline test. Does the issue persist with all plugins deactivated except for Page Builder and the Widgets Bundle?

    Thread Starter shaunbowen

    (@shaunbowen)

    Hi Andrew, I think it is an issue in Chrome, as I can see it now on other websites that don’t use Page Builder. But in Firefox the issue is not there.

    Many thanks for looking into it, I will investigate browsers and extensions, and mark this as resolved.

    Plugin Support Andrew Misplon

    (@misplon)

    Thanks for the update. A browser extension is the other possibility. Perhaps you could log in via an Incognito window with all extensions deactivated to check. Hopefully, you’ll be able to make progress soon! Please, let us know if any follow-up queries arise.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Siteorigin adds border bottom color to image hover’ is closed to new replies.