Divi Countdown Timer: Hide First Number in Remaining Days

Last modified Sep 10, 2020
Difficulty Beginner
Language CSS
Category

The Divi Countdown Timer “Days” field has three zeros and no built-in option for changing or removing the field. In this guide, you will learn how to remove the leading zero in the Countdown module.

The Countdown Timer module adds an animated timer that counts down to a specific date that can be used for coming soon landing page, maintenance mode pages, and creating urgency on a sales page.

Follow these steps to remove an unnecessary leading zero from the day’s section.

Tutorial Requierments

  • Copy and Paste CSS Code Snippet – The code for this tutorial was created and tested by our design team.
  • Basic knowledge of how to add CSS to WordPress – If you are new to Divi follow this tutorial to learn how to add CSS to your site.

 

The code works as follows: first we catch the first character in the days section, and change the font size to 0px.

 

 

 

Even if the font size is 0 the text still has line-height. So we set vertical-align to top so it doesn’t affect the height of the section.

 

 

CSS

.et_pb_countdown_timer .section.days p.value:first-letter {    
font-size: 0px;   
vertical-align: top 
}

 

Does this snippet (still) work?

Please let us know in the comments if everything worked as expected. We have tested this code with the Version: 4.5.3 of the Divi Theme.
If you think this code saved you time, we will be happy to receive a comment!

____

License: This snippet contains code from the Divi Theme, copyright https://elegantthemes.com, modified by Divi Space, November 13, 2019. Licensed under the GNU General Public License, no warranty; click here for details.

Your Comments

2 Comments

  1. Christopher

    Yes it still works & that was easy, thank you!

    Reply
  2. Beth

    Thank you!! =)

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Receive notifications about our new blog posts.