CSS guide for Elements
Learn how to position Elements correctly on your web pages and adapt them to your layout requirements.
The Fundraise Up Dashboard lets you customize Element appearance — colors, sizes, and borders. However, you may need CSS to control exactly where and how Elements fit into your website design. This guide shows you how to:
- Position Elements in specific locations on your pages.
- Align Elements to match your layout.
- Control Element width to fit specific areas like sidebars.
- Style the Stat Counter (which uniquely allows full CSS customization).
Align Elements
By default, Elements align to the left of their container. While this works for many layouts, you can use CSS to change alignment when needed.
Use CSS classes (recommended)
Using CSS classes is the recommended way to align Elements. This approach:
- Makes your code more maintainable.
- Improves performance compared to inline styles.
- Lets you reuse styles across multiple Elements.
In this example, we use the .fun-align--center class to center-align an Element. You can reuse this class to align other Elements the same way.
1<head>
2 <!-- Fundraise Up code is here -->
3 <style>
4 .fun-align--center {
5 text-align: center;
6 }
7 </style>
8</head>
9<body>
10 <div class="fun-align--center">
11 <a href="#XMNCFGSY" style="display: none"></a>
12 </div>
13</body>
14<a href="#XMNCFGSY" style="display: none"></a> is the code that you copy from your Fundraise Up Dashboard when setting up an Element.
Use inline styles
While CSS classes are preferred, you can use inline styles when you can’t modify your website’s CSS rules. Here are three examples showing different alignments:
1<head>
2 <!-- Fundraise Up code is here -->
3</head>
4<body>
5 <!-- Example #1: Default left alignment -->
6 <a href="#XMNCFGSY" style="display: none"></a>
7
8 <!-- Example #2: Center alignment -->
9 <div style="text-align:center;">
10 <a href="#XMNCFGSY" style="display: none"></a>
11 </div>
12
13 <!-- Example #3: Right alignment -->
14 <div style="text-align:right;">
15 <a href="#XMNCFGSY" style="display: none"></a>
16 </div>
17</body>
18<a href="#XMNCFGSY" style="display: none"></a> is the code that you copy from your Fundraise Up Dashboard when setting up an Element.
Control Element width
Elements respond automatically to different screen sizes. You can use this responsive behavior to fit Elements into various layouts on your website.
To fit an Element into a narrower space like a sidebar, wrap it in a container with a defined width. In the example below, the Element is in a <div> with the class .sidebar, which limits its width to 300 px. The Element automatically adjusts its appearance to fit this width constraint.
1<head>
2 <!-- Fundraise Up code is here -->
3 <style>
4 .sidebar {
5 max-width: 300px;
6 }
7 </style>
8</head>
9<body>
10 <div class="sidebar">
11 <a href="#XMNCFGSY" style="display: none"></a>
12 </div>
13</body>
14<a href="#XMNCFGSY" style="display: none"></a> is the code that you copy from your Fundraise Up Dashboard when setting up an Element.
Style the Stat Counter
The Stat Counter displays as plain text on your website, which lets you customize its appearance with CSS.