If you are working with Fundraise Up, you may have noticed that our typical element code includes HTML links formatted as follows:

1<a href="#XXXXXXXX" style="display: none"></a>

The Role of "display: none"

The Fundraise Up elements are often present on your webpage before our JavaScript library is fully loaded. In this period, any custom CSS settings you've implemented on your website could inadvertently style these HTML links, leading to unintended visual effects. By including the display:none property, these element links remain hidden, thereby avoiding any visual disruptions. Once our library is loaded, it transforms these hidden links into the fully functional Fundraise Up elements, seamlessly integrating them into your website as intended.

Special Note for Webpage Editors Like Webflow

If you're using a webpage editor that has a live preview feature, such as Webflow, elements with display:none might not be visible in the preview. In these situations, you can temporarily remove the display:none attribute to see how the elements will look. However, it's crucial to reinstate it before publishing to ensure the elements function correctly in the live environment.

Why You Shouldn't Remove It

• Risk of Disruption: Omitting the display:none parameter exposes the links in a premature state, potentially causing visual inconsistencies on your website.
• Perception of Loading Time: Without display:none, there might be an impression that the webpage is still loading or not fully operational, which could affect how your website is perceived.