Shopify Password Page Countdown customize

Store Design
1

Password page countdown.png
Password page countdown.png1916×947 107 KB

Hello. Can someone maybe explain me how to put the countdown in the middle of the page and in a smaller size? (Like in the red box)

This are my codes for the countdown:

{% if end_date != blank %}

{% if title != blank %}

{{ title }}

{% endif %}
00 Days
00 Hours
00 Minutes
00 Seconds


/* styles for timer */ .timer { /*background: #f6fafd;*/ padding: 10px; margin: 10px 0; }

.timer–expired {
display: none;
}

.timer__title {
@extend .paragraph;
text-align: center;
}

.timer-display {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin-top: 5px;
}

.timer-block {
position: relative;
width: 25%;
padding: 0 10px;

&:not(:last-child):after {
content: ‘:’;
position: absolute;
right: 0;
top: 3px;
}
}

.timer-block__num,
.timer-block__unit {
display: block;
text-align: center;
font-size: 32px;
font-weight: 900;
}

{% endif %}

Thank you very much for your help!

2

hi @Hiro5 ,

ExpertRookie here, can you provide me your Shopify Password Page url for me to check.