How to Equalize the Font Size of the Dates in the Events Design Element

By default, when you use Style 1 as the style of the Events Design Element, you will notice that the Start and End Date have different font sizes:

This article will demonstrate how to equalize the font size using Custom CSS:

TABLE OF CONTENTS

• Prerequisites
• Interactive Tutorial
• Step-by-step Tutorial
  • Step 1: Edit the ShortPoint Web Part
  • Step 2: Copy the Code
  • Step 3: Edit the Events Design Element
  • Step 4: Paste the Code
  • Step 5: Save

Prerequisites

• You must have the latest version of ShortPoint SPFx installed on your SharePoint environment.
• You must be a ShortPoint Designer with an active license.
• You must already have the Events Design Element on your page.
• You must use [1] Style 1 as the design style and disable the [2] Group by Day option. Otherwise, the Events Design Element will showcase a different design, and the Custom CSS in this article will not be applicable.

Interactive Tutorial

Copy the Custom CSS below before starting the Interactive Tutorial:

.shortpoint-event-same-month .shortpoint-event-end {
    font-size: 100%!important;
}

NOTEYou must use [1] Style 1 as the design style and disable the [2] Group by Day option. Otherwise, the Events Design Element will showcase a different design, and the Custom CSS in this article will not be applicable.

Step-by-step Tutorial

Follow the detailed guide below to learn how to equalize the font size of the start and end dates.

Step 1: Edit the ShortPoint Web Part

• Go to the SharePoint page you want to use and click Edit:

• Click the close icon:

• Select the ShortPoint tag.
• Click the Edit Properties icon:

Step 2: Copy the Code

Copy the Custom CSS code below:

.shortpoint-event-same-month .shortpoint-event-end {
    font-size: 100%!important;
}

NOTES:
 You must already have the Events Design Element on your page. To learn how to add it, check out How to Customize the Events Design Element.



You must use [1] Style 1 as the design style and disable the [2] Group by Day option. Otherwise, the Events Design Element will showcase a different design, and the Custom CSS in this article will not be applicable.