How to Customize Countdown Height and Text Position

By default, you do not have the option to customize the height and the text position of the Countdown Design Element.

This article will demonstrate how to adjust the height of the Countdown Design Element and the text position of the content inside it using Custom CSS:

TABLE OF CONTENTS

• Prerequisites
• Step-by-step Tutorial
  • Step 1: Edit the ShortPoint Web Part
  • Step 2: Copy the Custom CSS
  • Step 3: Edit the Countdown Design Element
  • Step 4: Paste the code
  • Step 5: Save

Prerequisites

• You must have the latest version of ShortPoint SPFx installed for your SharePoint environment.
• You must be a ShortPoint Designer with an active license.
• You must already have the Countdown Design Element on your SharePoint page.

Step-by-step Tutorial

Follow the detailed guide to learn how to execute this solution using Custom CSS:

Step 1: Edit the ShortPoint Web Part

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

Click the ShortPoint tag:

Select the pencil icon:

Step 2: Copy the Custom CSS

Copy the code below:

.shortpoint-countdown-amount {
    max-height: 50px !important;
    min-height: 50px !important;
    line-height: 55px !important;
}

.shortpoint-countdown-icon > .shortpoint-countdown-amount {
    line-height: 50px !important;
}

.shortpoint-countdown-period {
    /* change inline to none if you want to hide the text under each number */
    display: inline;
}

NOTEBefore proceeding, make sure you already have the Countdown Design Element on your page. To learn how to insert it into your page, check out How to Customize the Countdown Design Element.

Click the Countdown tag:

Select the cogwheel icon:

Step 4: Paste the code

Click the next icon:

Navigate to the Custom CSS tab:

Paste the code in the Custom CSS field:

To customize the height, change the max-height and min-height values according to your preference:

To adjust the text position, modify the line-height values:

NOTEIf you wish to hide the text below the Countdown, simply change the display value to none.

Step 5: Save

Once satisfied, click the green check mark:

Then, click the eye icon to see your changes in real-time:

Click Save to apply all your changes:

That’s it! You can now customize the Countdown Design Element's height and text position. Enjoy trying out this handy Custom CSS on your SharePoint pages.

Related articles:

• Make the Countdown Design Element not Display Seconds
• How to Display Countdown Element Without an Icon
• How to Customize the Countdown Design Element in Live Mode