Fill color is changing to black in Mobile

  • Resolved IIC-Inc

    (@iic-inc)


    2 months ago

    Hello,

    I’m having an issue with the background fill color changing from a pink, as it’s correctly shown in Desktop mode, to black on Mobile devices.

    We’re using Beaver Builder (Lite) version to create the pages so maybe there’s a conflict there? Or, alternatively, I do have the thermometer listed twice on the same page, just in different spots between Desktop (top, over video) and Mobile (near the bottom of the page). All is contingent on media size; one or the other gets hidden.

    I’m getting the same results in all browsers (Chrome, FireFox, Opera, Brave, et al.)

    Thanks for your assistance in advance!

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author rhewlif

    (@henryp)

    Hi,

    Ok, interesting problem. Do you have a page where I can see this happening? And what are the shortcodes you are using?

    Off the top of my head my first suggestion would be to check there is not a typo in the shortcode/settings page for the fill color – it should be a hex value with the hash symbol e.g., fill=#d7191c. It would appear black if the colour code can’t be parsed.

    Or are you referring to the therm_fill class that is normally transparent by default? It may be that the mobile browser doesn’t recognise the transparent value, and you could replace this with e.g., fill: #ffffff00; (or something that matches your site background) under the custom css tab on the settings page.

    Thread Starter IIC-Inc

    (@iic-inc)

    Sorry, I forgot to include the link: https://dogparks.me

    Below are the images with the settings for the Thermometer:

    To show the thermometer, I’ve only added [thermometer] without anything else tagged within the brackets.

    You can check the results in real-time by changing the size of your desktop/laptop/tablet view to a smaller width. Once it snaps into mobile orientation, the thermometer will be toward the bottom of the page but the inset color will be black instead of pink.

    Thanks for your help.

    Plugin Author rhewlif

    (@henryp)

    Thanks for the extra info – it’s clearer now. It seems the way your theme handles content for mobile or desktop is to create two versions of the page, then hide one or the other with css. In the thermometer the fill is set from a linearGradient element within the svg, which for these two thermometers will have the same ‘id’. Normally this isn’t a problem, but it seems hiding the first (desktop based) content confuses the second thermometer as it can’t find the original linearGradient element to fill itself.

    I might be able to fix this with a plugin update after some more testing. But in the meantime, you could try to change the fill on the ‘mobile’ thermometer very slightly so that the two linearGradient elements have different id’s E.g., [thermometer fill=#F18380]

    Thread Starter IIC-Inc

    (@iic-inc)

    Awesome! That last bit in changing the bracket for mobile helped! The pink fill is correctly displayed.

    Excellent work and thank you so much for your quick, concise answers. Fantastic support!

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