How do I add a margin to Eventbrite embed code

Store Design
,

Topic summary

A user is embedding multiple Eventbrite checkout widgets on a custom HTML page but encounters a layout issue where the embedded events appear stacked directly on top of each other with no visual separation.

Problem Details:

  • Multiple Eventbrite embed codes are placed consecutively in the HTML editor
  • No spacing exists between embedded widgets, making it difficult to distinguish where one event ends and another begins
  • A screenshot shows the widgets appearing as one continuous block

Solution Provided:

  • Add CSS styling to create vertical spacing between the embedded widgets
  • Wrap each <div id="eventbrite-widget-container-[ID]"> in a container with margin properties
  • Apply bottom margin (e.g., margin-bottom: 20px or similar) to separate the widgets visually

The discussion includes the original embed script code and a suggested code modification to resolve the spacing issue.

Summarized with AI on November 25. AI used: claude-sonnet-4-5-20250929.
1

Hello,

I am trying to add multiple embedded codes to a custom page in the html editor. The problem I’ve run up against is that the events literally sit on top of one another… It’s hard to discern where one ends and the next begins.

How do I add space between the embedded codes?

This is how it shows up, with the green line highlighting where they should be separated:

Screenshot 2022-11-09 143441.jpg
Screenshot 2022-11-09 143441.jpg788×502 47.5 KB

Script:

2

Hi @TRUENOSH ,

Please change code here:

Screenshot.png
Screenshot.png1035×749 89 KB

Code:

Hope it helps!