Floating icon

  • Resolved selqs

    (@selqs)


    1 year ago

    I’ve tried using the sample CSS you provided on this page:
    https://complianz.io/css-lesson-23-your-manage-consent-button-as-floating-widget/

    Unfortunately, it doesn’t behave as expected. I’ve removed the button label and replaced it with a period (.) as suggested. However:

    1. The text (.) still appears and doesn’t get hidden.
    2. The button background appears elliptical, not perfectly circular.
    3. I want to use a custom SVG icon (icon.svg) instead of Font Awesome, but it doesn’t align or size properly.
    4. On mobile devices, the styling breaks and the icon does not remain consistent.

    Could you please provide an updated, clean CSS snippet that:

    • Hides the text completely
    • Uses icon.svg instead of Font Awesome
    • Renders a perfectly round, floating icon button (60x60px)
    • Works well across desktop and mobile

    Thank you in advance!

Viewing 1 replies (of 1 total)
  • Plugin Support Antonio Candela

    (@antoiub)

    1 year ago

    Hello @selqs ,

    Thank you for reaching out and for your great feedback.

    I’ve updated the guide by fixing the roundness of the floating widget, properly hiding the “.”, and adding support for .svg files. Both icons are now fully centered as well.
    Feel free to adjust the size to 60×60 if you prefer; for now, we’ve kept it at 50×50, similar to the previous version.

    From my tests, the icon should remain responsive on both desktop and mobile. If it’s not displaying correctly on your site, please try excluding Complianz from your caching plugin — guide here.

    I hope this helps!

    Best regards,
    Antonio

Viewing 1 replies (of 1 total)

The topic ‘Floating icon’ is closed to new replies.