Issue

If the width of your Events Design Element is not enough to handle the title or description of the event, you may notice that the text container will break a word in the middle as shown here:

Reason

This happens when you have long titles/descriptions for your events.

TABLE OF CONTENTS

• Issue
• Reason
• Workaround
  • Step 1. Open the settings of the Events Design Element
  • Step 2. Copy the custom CSS code
  • Step 3. Update the Events Design Element with the code

Workaround

Step 1. Open the settings of the Events Design Element

Edit the page.

Click the cog wheel icon to open the settings of the Events Design Element:

The Settings tab will open.

Step 2. Copy the custom CSS code

Here is the custom CSS code you will need to use as workaround for event titles being cut in mid-word in your Events Design Element:

.shortpoint-event-title, .shortpoint-event-tag-line, .shortpoint-event-description {
  overflow-wrap: normal;
  word-break: keep-all;
}

Note: You may update the CSS code if you only need it for the title/tagline/description by simply removing the selectors. See sample below: 

.shortpoint-event-title {
  overflow-wrap: normal;
  word-break: keep-all;
}

Step 3. Update the Events Design Element with the code

Switch to the Custom CSS tab:

Paste the copied code from Step 2 to the Custom CSS field:

You may check how it will look like on your page by clicking the Preview button:  

Then, click Update and save the page: 

After applying the workaround, this is how it will look like:

Related articles:

• How to Change the Panel Title Alignment (to Center or Right)
• CSS Customized Look for Events Design Element
• How to Insert "Add to my calendar" Link to ShortPoint Events Design Element