i want to make this timer section of my shopify store mobile responsive by adding the possibility to modify the size eather in mobile or wider screens and all other settings
<div
style=“background-color:{{ section.settings.section-background-color }};”
>
<style>
.countdown-banner-{{ section.id }}-wrapper {
padding-top: var(–pt);
padding-bottom: var(–pb);
}
@media screen and (min-width: 750px) {
.countdown-banner-{{ section.id }}-wrapper {
padding-top: var(–pt-desktop);
padding-bottom: var(–pb-desktop);
}
}
.countdown-banner-{{ section.id }} {
position: relative;
padding: 32px;
}
@media screen and (min-width: 750px) {
.countdown-banner-{{ section.id }} {
padding: 25px 32px;
}
}
</style>
<div
class=“
countdown-banner-{{ section.id }}-wrapper
{% unless section.settings.full_width %}
page-width
{% endunless %}
“
style=”
–pt: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
–pt-desktop: {{ section.settings.padding_top }}px;
–pb: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
–pb-desktop: {{ section.settings.padding_bottom }}px;
“
>
<style>
.countdown-banner-{{ section.id }} {
position: relative;
padding: 32px;
}
@media screen and (min-width: 750px) {
.countdown-banner-{{ section.id }} {
padding-left: 4%;
padding-right: 4%;
}
}
</style>

<div
class=“countdown-banner-{{ section.id }}”
style=”
background-color:var(–colorBtnPrimary);
padding-top: {{ section.settings.pt }}px;
padding-bottom: {{ section.settings.pb }}px;

{% unless section.settings.full_width %}
border-radius: {{ section.settings.border_radius }}px;
{% endunless %}
“
>
<style>
.countdown-banner-content-{{ section.id }} {
position: relative;
z-index: 1;
overflow: hidden;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 2rem;
text-align: center;
line-height: 1.1;
}
@media screen and (min-width: 750px) {
.countdown-banner-content-{{ section.id }} {
flex-wrap: nowrap;
}
}
</style>
<div
class=”
countdown-banner-content-{{ section.id }}
{% if section.settings.full_width %}
page-width
{% endif %}
“
>
{% for block in section.blocks %}
{% case block.type %}
{% when ‘text’ %}
<style>
.countdown-banner-text-{{ section.id }}-{{ block.id }} {
display: flex;
flex-direction: column;
justify-content: center;
text-align:center;
margin-top: 16px;
margin-bottom: 16px;
gap: 20px;
}
@media screen and (min-width: 750px) {
.countdown-banner-text-{{ section.id }}-{{ block.id }} {
text-align:left;
}
}
</style>
<div class=“countdown-banner-text-{{ section.id }}-{{ block.id }}”>
{% if block.settings.heading != blank %}
<style>
.countdown-banner-heading-{{ section.id }}-{{ block.id }} {
font-weight: 700;
}
</style>
<div
class=“countdown-banner-heading-{{ section.id }}-{{ block.id }}”
style=”
font-size: {{ block.settings.font_size }}px;
color: {{ block.settings.color }};
“
>
{{ block.settings.heading }}
</div>
{% endif %}
{% if block.settings.richtext != blank %}
<style>
.countdown-banner-richtext-{{ section.id }}-{{ block.id }} p {
margin: 0;
line-height: 1.5;
}
</style>
<div
class=“countdown-banner-richtext-{{ section.id }}-{{ block.id }}”
style=”
font-size: {{ block.settings.richtext_font_size }}px;
color: {{ block.settings.richtext_color }};
“
>
{{ block.settings.richtext }}
</div>
{% endif %}
</div>
{% when ‘timer’ %}
<style>
.countdown-timer-{{ section.id }}-{{ block.id }} {
display: flex;
justify-content: center;
align-items: center;
flex-grow: 1;
margin-top: 16px;
margin-bottom: 16px;
align-items: stretch;
}
.countdown-timer-{{ section.id }}-{{ block.id }} .time-block {
position: relative;
border-radius: 12px;
/padding: 20px;/
padding: 0 1rem;
}
.countdown-timer-{{ section.id }}-{{ block.id }} .time-block__num,
.countdown-timer-{{ section.id }}-{{ block.id }} .time-block__unit {
display: block;
text-align: center;
}
.countdown-timer-{{ section.id }}-{{ block.id }} .time-block__num {
font-size: 25px;
line-height: 1.2;
font-weight: 700;
margin-bottom: 4px;
}
.countdown-timer-{{ section.id }}-{{ block.id }} .time-block__unit {
text-transform: uppercase;
margin-top: 6px;
font-size: 10px;
}
@media (min-width: 750px) {
.countdown-timer-{{ section.id }}-{{ block.id }} .time-block__unit {
font-size: 12px;
}
}
.countdown-timer-{{ section.id }}-{{ block.id }} .time-divier {
position: relative;
width: 1px;
min-height: 100%;
background-color: var(–color);
}
</style>

<div
class=“countdown-timer-{{ section.id }}-{{ block.id }}”
{{ block.shopify_attributes }}
style=”
color: {{ block.settings.color }};
–color: {{ block.settings.color }};
”
>
<div class=“time-block”>
<span class=“time-block__num js-timer-days”>00</span>
<span class=“time-block__unit”>{{ block.settings.days_translated }}</span>
</div>
{% comment %} <span class=“time-colon”>:</span> {% endcomment %}
<span class=“time-divier”></span>
<div class=“time-block”>
<span class=“time-block__num js-timer-hours”>00</span>
<span class=“time-block__unit”>{{ block.settings.hours_translated }}</span>
</div>
{% comment %} <span class=“time-colon”>:</span> {% endcomment %}
<span class=“time-divier”></span>
<div class=“time-block”>
<span class=“time-block__num js-timer-minutes”>00</span>
<span class=“time-block__unit”>{{ block.settings.minutes_translated }}</span>
</div>
{% comment %} <span class=“time-colon”>:</span> {% endcomment %}
<span class=“time-divier”></span>
<div class=“time-block”>
<span class=“time-block__num js-timer-seconds”>00</span>
<span class=“time-block__unit”>{{ block.settings.seconds_translated }}</span>
</div>
</div>

<style>
.countdown-timer-completed-text-{{ section.id }}-{{ block.id }} {
display: none;
}
</style>
<div
class=“countdown-timer-completed-text-{{ section.id }}-{{ block.id }}”
>
{{ block.settings.timer_completed_text }}
</div>

<script type=“text/javascript”>
(function () {

function startTimer() {
const second = 1000,
minute = second * 60,
hour = minute * 60,
day = hour * 24,
wrapper = document.querySelector(
‘.countdown-timer-{{ section.id }}-{{ block.id }}’
),
countDown = new Date(‘{{ block.settings.year }}-{{ block.settings.month }}-{{ block.settings.day }}T{{ block.settings.hour }}:{{ block.settings.minute }}:00Z’).getTime();

console.log(‘start timer, end date:’ + countDown)
const interval = setInterval(function () {
let now = new Date().getTime(),
distance = countDown - now,
days = Math.floor(distance / day),
hours = Math.floor((distance % day) / hour),
minutes = Math.floor((distance % hour) / minute),
seconds = Math.floor((distance % minute) / second);

(wrapper.querySelector(‘.js-timer-days’).innerText = (
days
)),
(wrapper.querySelector(‘.js-timer-hours’).innerText = (
hours
)),
(wrapper.querySelector(‘.js-timer-minutes’).innerText = (
minutes
)),
(wrapper.querySelector(‘.js-timer-seconds’).innerText = (
seconds
));

if (distance < 0) {
wrapper.querySelector(‘.js-timer-days’).innerText = ‘00’;
wrapper.querySelector(‘.js-timer-hours’).innerText = ‘00’;
wrapper.querySelector(‘.js-timer-minutes’).innerText = ‘00’;
wrapper.querySelector(‘.js-timer-seconds’).innerText = ‘00’;
{% if block.settings.hide_timer_on_completed %}
wrapper.style.display = ‘none’;
{% endif %}
document.querySelector(
‘.countdown-timer-completed-text-{{ section.id }}-{{ block.id }}’
).style.display = ‘block’;

clearInterval(interval);
}

}, second);
document.addEventListener(‘shopify:section:unload’, function (event) {
if (event.detail.sectionId === ‘{{ section.id }}’) clearInterval(interval);
});
}
startTimer()
if (window.Shopify && Shopify.designMode) {
document.addEventListener(‘shopify:section:load’, function (event) {
if (event.detail.sectionId === ‘{{ section.id }}’) {
startTimer();
}
});
}
})();
</script>
{% else %}

{% endcase %}
{% endfor %}
</div>
</div>
</div>
</div>

{% schema %}
{
“name”: “SS - Countdown timer 2”,
“presets”: [
{
“category”: “Custom”,
“name”: “SS - Countdown timer 2”,
“blocks”: [
{
“type”: “text”
},
{
“type”: “timer”
}
]
}
],
“settings”: [
{
“type”: “header”,
“content”: “Save settings to see timer updates”
},
{
“type”: “checkbox”,
“id”: “full_width”,
“label”: “Section full width”,
“default”: false
},
{
“type”: “range”,
“id”: “border_radius”,
“min”: 0,
“max”: 250,
“step”: 5,
“unit”: “px”,
“label”: “Border radius”,
“default”: 15
},
{
“type”: “header”,
“content”: “Background color”
},
{
“type”: “color”,
“label”: “Content background color”,
“id”: “bg_color”,
“default”: “#223b3d”
},
{
“type”: “color”,
“label”: “Section background color”,
“id”: “section-background-color”,
“default”: “#FFFFFF”
},
{
“type”: “header”,
“content”: “Content padding”
},
{
“type”: “range”,
“id”: “pt”,
“min”: 0,
“max”: 100,
“step”: 4,
“unit”: “px”,
“label”: “Padding top”,
“default”: 32
},
{
“type”: “range”,
“id”: “pb”,
“min”: 0,
“max”: 100,
“step”: 4,
“unit”: “px”,
“label”: “Padding bottom”,
“default”: 32
},
{
“type”: “header”,
“content”: “Section padding”
},
{
“type”: “range”,
“id”: “padding_top”,
“min”: 0,
“max”: 100,
“step”: 4,
“unit”: “px”,
“label”: “Padding top”,
“default”: 36
},
{
“type”: “range”,
“id”: “padding_bottom”,
“min”: 0,
“max”: 100,
“step”: 4,
“unit”: “px”,
“label”: “Padding bottom”,
“default”: 36
}
],
“blocks”: [
{
“type”: “text”,
“name”: “Text”,
“limit”: 1,
“settings”: [
{
“type”: “text”,
“id”: “heading”,
“label”: “Heading”,
“default”: “Big Summer Sale”
},
{
“type”: “color”,
“id”: “color”,
“label”: “Color”,
“default”: “#ffffff”
},
{
“type”: “range”,
“id”: “font_size”,
“min”: 12,
“max”: 80,
“step”: 1,
“unit”: “px”,
“label”: “Heading font size”,
“default”: 30
},
{
“type”: “richtext”,
“id”: “richtext”,
“label”: “Richtext”,
“default”: “<p>Hurry up! Get 30% off selected items. Summer sale ends soon.</p>”
},
{
“type”: “color”,
“id”: “richtext_color”,
“label”: “Richtext Color”,
“default”: “#ffffff”
},
{
“type”: “range”,
“id”: “richtext_font_size”,
“min”: 10,
“max”: 80,
“step”: 1,
“unit”: “px”,
“label”: “Richtext font size”,
“default”: 14
}
]
},
{
“type”: “timer”,
“name”: “Timer”,
“limit”: 1,
“settings”: [
{
“type”: “header”,
“content”: “Timer settings:”,
“info”: “Please use UTC time zone”
},
{
“type”: “select”,
“id”: “year”,
“label”: “Year”,
“default”: “2024”,
“options”: [
{
“value”: “2022”,
“label”: “2022”
},
{
“value”: “2023”,
“label”: “2023”
},
{
“value”: “2024”,
“label”: “2024”
},
{
“value”: “2025”,
“label”: “2025”
},
{
“value”: “2026”,
“label”: “2026”
},
{
“value”: “2027”,
“label”: “2027”
},
{
“value”: “2028”,
“label”: “2028”
},
{
“value”: “2029”,
“label”: “2029”
},
{
“value”: “2030”,
“label”: “2030”
},
{
“value”: “2031”,
“label”: “2031”
},
{
“value”: “2032”,
“label”: “2032”
},
{
“value”: “2033”,
“label”: “2033”
},
{
“value”: “2034”,
“label”: “2034”
},
{
“value”: “2035”,
“label”: “2035”
},
{
“value”: “2036”,
“label”: “2036”
},
{
“value”: “2037”,
“label”: “2037”
},
{
“value”: “2038”,
“label”: “2038”
},
{
“value”: “2039”,
“label”: “2039”
},
{
“value”: “2040”,
“label”: “2040”
},
{
“value”: “2041”,
“label”: “2041”
},
{
“value”: “2042”,
“label”: “2042”
},
{
“value”: “2043”,
“label”: “2043”
},
{
“value”: “2044”,
“label”: “2044”
},
{
“value”: “2045”,
“label”: “2045”
},
{
“value”: “2046”,
“label”: “2046”
},
{
“value”: “2047”,
“label”: “2047”
},
{
“value”: “2048”,
“label”: “2048”
},
{
“value”: “2049”,
“label”: “2049”
},
{
“value”: “2050”,
“label”: “2050”
}
]
},
{
“type”: “select”,
“id”: “month”,
“label”: “month”,
“default”: “01”,
“options”: [
{
“value”: “01”,
“label”: “January”
},
{
“value”: “02”,
“label”: “February”
},
{
“value”: “03”,
“label”: “March”
},
{
“value”: “04”,
“label”: “April”
},
{
“value”: “05”,
“label”: “May”
},
{
“value”: “06”,
“label”: “June”
},
{
“value”: “07”,
“label”: “July”
},
{
“value”: “08”,
“label”: “August”
},
{
“value”: “09”,
“label”: “September”
},
{
“value”: “10”,
“label”: “October”
},
{
“value”: “11”,
“label”: “November”
},
{
“value”: “12”,
“label”: “December”
}
]
},
{
“type”: “select”,
“id”: “day”,
“label”: “day”,
“default”: “01”,
“options”: [
{
“value”: “01”,
“label”: “01”
},
{
“value”: “02”,
“label”: “02”
},
{
“value”: “03”,
“label”: “03”
},
{
“value”: “04”,
“label”: “04”
},
{
“value”: “05”,
“label”: “05”
},
{
“value”: “06”,
“label”: “06”
},
{
“value”: “07”,
“label”: “07”
},
{
“value”: “08”,
“label”: “08”
},
{
“value”: “09”,
“label”: “09”
},
{
“value”: “10”,
“label”: “10”
},
{
“value”: “11”,
“label”: “11”
},
{
“value”: “12”,
“label”: “12”
},
{
“value”: “13”,
“label”: “13”
},
{
“value”: “14”,
“label”: “14”
},
{
“value”: “15”,
“label”: “15”
},
{
“value”: “16”,
“label”: “16”
},
{
“value”: “17”,
“label”: “17”
},
{
“value”: “18”,
“label”: “18”
},
{
“value”: “19”,
“label”: “19”
},
{
“value”: “20”,
“label”: “20”
},
{
“value”: “21”,
“label”: “21”
},
{
“value”: “22”,
“label”: “22”
},
{
“value”: “23”,
“label”: “23”
},
{
“value”: “24”,
“label”: “24”
},
{
“value”: “25”,
“label”: “25”
},
{
“value”: “26”,
“label”: “26”
},
{
“value”: “27”,
“label”: “27”
},
{
“value”: “28”,
“label”: “28”
},
{
“value”: “29”,
“label”: “29”
},
{
“value”: “30”,
“label”: “30”
},
{
“value”: “31”,
“label”: “31”
}
]
},
{
“type”: “select”,
“id”: “hour”,
“label”: “Hour”,
“default”: “00”,
“options”: [
{ “value”: “00”, “label”: “12 AM” },
{ “value”: “01”, “label”: “01 AM” },
{ “value”: “02”, “label”: “02 AM” },
{ “value”: “03”, “label”: “03 AM” },
{ “value”: “04”, “label”: “04 AM” },
{ “value”: “05”, “label”: “05 AM” },
{ “value”: “06”, “label”: “06 AM” },
{ “value”: “07”, “label”: “07 AM” },
{ “value”: “08”, “label”: “08 AM” },
{ “value”: “09”, “label”: “09 AM” },
{ “value”: “10”, “label”: “10 AM” },
{ “value”: “11”, “label”: “11 AM” },
{ “value”: “12”, “label”: “12 PM” },
{ “value”: “13”, “label”: “01 PM” },
{ “value”: “14”, “label”: “02 PM” },
{ “value”: “15”, “label”: “03 PM” },
{ “value”: “16”, “label”: “04 PM” },
{ “value”: “17”, “label”: “05 PM” },
{ “value”: “18”, “label”: “06 PM” },
{ “value”: “19”, “label”: “07 PM” },
{ “value”: “20”, “label”: “08 PM” },
{ “value”: “21”, “label”: “09 PM” },
{ “value”: “22”, “label”: “10 PM” },
{ “value”: “23”, “label”: “11 PM” }
]
},
{
“type”: “select”,
“id”: “minute”,
“label”: “Minute”,
“default”: “00”,
“options”: [
{
“value”: “00”,
“label”: “00”
},
{
“value”: “01”,
“label”: “01”
},
{
“value”: “02”,
“label”: “02”
},
{
“value”: “03”,
“label”: “03”
},
{
“value”: “04”,
“label”: “04”
},
{
“value”: “05”,
“label”: “05”
},
{
“value”: “06”,
“label”: “06”
},
{
“value”: “07”,
“label”: “07”
},
{
“value”: “08”,
“label”: “08”
},
{
“value”: “09”,
“label”: “09”
},
{
“value”: “10”,
“label”: “10”
},
{
“value”: “11”,
“label”: “11”
},
{
“value”: “12”,
“label”: “12”
},
{
“value”: “13”,
“label”: “13”
},
{
“value”: “14”,
“label”: “14”
},
{
“value”: “15”,
“label”: “15”
},
{
“value”: “16”,
“label”: “16”
},
{
“value”: “17”,
“label”: “17”
},
{
“value”: “18”,
“label”: “18”
},
{
“value”: “19”,
“label”: “19”
},
{
“value”: “20”,
“label”: “20”
},
{
“value”: “21”,
“label”: “21”
},
{
“value”: “22”,
“label”: “22”
},
{
“value”: “23”,
“label”: “23”
},
{
“value”: “24”,
“label”: “24”
},
{
“value”: “25”,
“label”: “25”
},
{
“value”: “26”,
“label”: “26”
},
{
“value”: “27”,
“label”: “27”
},
{
“value”: “28”,
“label”: “28”
},
{
“value”: “29”,
“label”: “29”
},
{
“value”: “30”,
“label”: “30”
},
{
“value”: “31”,
“label”: “31”
},
{
“value”: “32”,
“label”: “32”
},
{
“value”: “33”,
“label”: “33”
},
{
“value”: “34”,
“label”: “34”
},
{
“value”: “35”,
“label”: “35”
},
{
“value”: “36”,
“label”: “36”
},
{
“value”: “37”,
“label”: “37”
},
{
“value”: “38”,
“label”: “38”
},
{
“value”: “39”,
“label”: “39”
},
{
“value”: “40”,
“label”: “40”
},
{
“value”: “41”,
“label”: “41”
},
{
“value”: “42”,
“label”: “42”
},
{
“value”: “43”,
“label”: “43”
},
{
“value”: “44”,
“label”: “44”
},
{
“value”: “45”,
“label”: “45”
},
{
“value”: “46”,
“label”: “46”
},
{
“value”: “47”,
“label”: “47”
},
{
“value”: “48”,
“label”: “48”
},
{
“value”: “49”,
“label”: “49”
},
{
“value”: “50”,
“label”: “50”
},
{
“value”: “51”,
“label”: “51”
},
{
“value”: “52”,
“label”: “52”
},
{
“value”: “53”,
“label”: “53”
},
{
“value”: “54”,
“label”: “54”
},
{
“value”: “55”,
“label”: “55”
},
{
“value”: “56”,
“label”: “56”
},
{
“value”: “57”,
“label”: “57”
},
{
“value”: “58”,
“label”: “58”
},
{
“value”: “59”,
“label”: “59”
}
]
},
{
“type”: “checkbox”,
“id”: “hide_timer_on_completed”,
“label”: “Hide timer on completed”,
“default”: false
},
{
“type”: “richtext”,
“id”: “timer_completed_text”,
“label”: “Timer completed text”
},
{
“type”: “color”,
“id”: “color”,
“label”: “Color”,
“default”: “#FFFFFF”
},
{
“type”: “header”,
“content”: “Translate”
},
{
“type”: “text”,
“id”: “days_translated”,
“label”: “Days”,
“default”: “Days”
},
{
“type”: “text”,
“id”: “hours_translated”,
“label”: “Hours”,
“default”: “Hours”
},
{
“type”: “text”,
“id”: “minutes_translated”,
“label”: “Minutes”,
“default”: “Minutes”
},
{
“type”: “text”,
“id”: “seconds_translated”,
“label”: “Seconds”,
“default”: “Seconds”
}
]
}
]
}
{% endschema %}