How can we help you today?

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.


no option for height and text position


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:


final result


TABLE OF CONTENTS


Prerequisites


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:


Edit


Click the ShortPoint tag:


ShortPoint tag


Select the pencil icon:


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;
}

Step 3: Edit the Countdown Design Element


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:


countdown tag


Select the cogwheel icon:


Cogwheel icon


Step 4: Paste the code


Click the next icon:


next icon


Navigate to the Custom CSS tab:


Custom CSS tab


Paste the code in the Custom CSS field:


Custom CSS field


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


change max-height and min-height


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


line-height value


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

none


Step 5: Save


Once satisfied, click the green check mark:


green check mark


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


eye icon


Click Save to apply all your changes:


Save


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:

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.

World's best intranet sites are designed using ShortPoint

Get started today! Learn more
See all 57 topics

Start a trial

Ignite your vision. Install ShortPoint directly on your site, or play in sandbox mode. No credit card required.

Get started today

World’s best intranet sites are designed using ShortPoint

Thousands of companies using ShortPoint everyday to design, brand and build award winning intranet sites.

Get started Learn more