Can I Remove the "display: none" Parameter from the Element Code?

When working with Fundraise Up, you may have noticed that the typical Element code includes HTML links with the display: none parameter.

The Purpose of "display: none"

Fundraise Up Elements are often present on your webpage before the JavaScript library is fully loaded. During this period, any custom CSS settings you've implemented on your website could inadvertently style these HTML links, potentially causing unintended visual effects. By including the display: none property, these Element links remain hidden, preventing any visual disruptions. Once the library is loaded, it transforms these hidden links into fully functional Fundraise Up Elements, seamlessly integrating them into your website as intended.

Considerations for Webpage Editors with Live Previews

If you're using a webpage editor with 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 essential to reinstate it before publishing to ensure the Elements function correctly in the live environment.

Why You Should Keep "display: none"

1. Preventing Visual Inconsistencies: Omitting the display: none parameter exposes the links in a premature state, which can lead to visual inconsistencies on your website. By keeping the parameter in place, you ensure that the Elements are displayed as intended once the Fundraise Up library is fully loaded.
2. Maintaining Perceived Loading Speed: Without display: none, users might get the impression that the webpage is still loading or not fully operational. This perception can negatively impact how your website is viewed. By keeping the Elements hidden until they are fully functional, you maintain a smooth user experience.
3. Ensuring Proper Functionality: The display: none parameter is an integral part of the Fundraise Up Element code. Removing it can interfere with the proper loading and functioning of the Elements. To guarantee that the Fundraise Up Elements work as expected, it's best to keep the parameter in place.