In this tutorial, we’ll show you how to hide the first digit on the remaining days on the Divi Countdown Timer module. This can be useful if your event date is less than one hundred days. So, it will make a visually appealing and straightforward countdown timer looks with a specific design requirement. Let’s get started!
Steps to Hide the First Digit on Remaining Days on the Divi Countdown Timer Module
Step 1: Add the Countdown Timer Module
Alright, we are going to start with adding the Countdown Timer module. Go to your Divi Builder editor, and we will start everything from scratch, so create a section with a single column, select the Countdown Timer module, and insert that module into the column. Afterward, set the date of your event, then edit and style up the module with your preference.
Note: Please ensure to set the event date less than one hundred days.
Step 3: Add the Custom CSS
As you can see from the image above, when you set the event date on your Countdown Timer module settings, the appearance of the remaining day/s will display in three digits. So, our job is to make the first digit on the remaining day/s disappear.
Go to the Page Settings by clicking the gear button (⚙️) on your Divi Builder editor. Afterward, navigate to the Advanced tab -> Custom CSS. Once you enter the Custom CSS section, copy the simple CSS snippet below and paste it into the Custom CSS input field.
.et_pb_countdown_timer .section.days p.value:first-letter {
font-size: 0px;
vertical-align: top
}
The Code Explanation:
This CSS snippet use to style the first letter of a paragraph element with the class name “value” that is a descendant of an element with the class name “days” within an element with the class name “section” that has the class name “et_pb_countdown_timer“. It hides the first digit on the remaining day/s by setting its font size to 0 pixels and aligning it to the top of the element.
That’s it. Now you’ve successfully hidden the first digit on the remaining day/s on the Divi Countdown Timer module. Don’t forget to save your project or publish it if you want to.
The Bottom Line
Using custom CSS, you have successfully removed the initial digit of the remaining days in the Divi Countdown Timer module. Hiding the first digit provides you more control over how your countdown timer appears visually, allowing you to design a streamlined, minimalist countdown or emphasize the second digit for more emphasis.
If you often create WordPress websites with Divi, you can use Divi Cloud for time efficiency. You can store your Divi assets (layouts, theme builder templates, code snippets, etc.) in the cloud, and you can access that from any website you create.
