How do I add custom CSS?

Use custom code to fine-tune your website's appearance beyond the standard options.

Short answer: Go to Site > Builder > Site settings > Design tab to add custom CSS.

Finding the Custom CSS option

  1. Go to Site > Builder
  2. Click Site settings
  3. Select the Design tab
  4. Scroll down to find the Custom CSS text area
  5. Enter your CSS code
  6. Click Save

What you can customize with CSS

  • Font sizes and styles
  • Spacing and margins
  • Colors and backgrounds
  • Button appearances
  • Section layouts
  • Mobile-specific styles

Example: Change a font size

.section-title {
  font-size: 32px;
}

Example: Adjust spacing

.content-section {
  padding: 40px 20px;
}

Example: Custom button color

.btn-primary {
  background-color: #d4a574;
  border-color: #d4a574;
}

Where custom CSS applies

Custom CSS added here applies to your wedding website only (the pages and sections you build in the website editor). It does not apply to:

  • The RSVP form
  • The Collect Details form
  • The check-in form
  • The access code page
  • The coming soon page

These pages use a separate, standard layout that is not affected by your website's custom CSS. Ecard custom CSS is also separate and only applies to the ecard itself.

Important notes

  • CSS requires some technical knowledge
  • Changes affect your entire website (but not the RSVP form or other pages listed above)
  • Test thoroughly on mobile and desktop
  • Invalid CSS can break your layout
  • Save a backup of working CSS before changes

If something breaks

If your CSS causes issues:
1. Go back to Custom CSS settings
2. Remove or comment out recent changes
3. Save and refresh your site
4. Add changes back one at a time

Tips

  • Start with small changes
  • Use browser developer tools to find element names
  • Test on multiple devices
  • Keep your CSS organized with comments
  • Don't override critical layout styles

Related articles