diff --git a/addons/website/static/src/snippets/s_countdown/000.js b/addons/website/static/src/snippets/s_countdown/000.js
index f0f9269272f..f70d7be8540 100644
--- a/addons/website/static/src/snippets/s_countdown/000.js
+++ b/addons/website/static/src/snippets/s_countdown/000.js
@@ -20,6 +20,7 @@ const CountdownWidget = publicWidget.Widget.extend({
      */
     start: function () {
         this.$wrapper = this.$('.s_countdown_canvas_wrapper');
+        this.$wrapper.addClass('d-flex justify-content-center');
         this.hereBeforeTimerEnds = false;
         this.endAction = this.el.dataset.endAction;
         this.endTime = parseInt(this.el.dataset.endTime);
@@ -52,10 +53,10 @@ const CountdownWidget = publicWidget.Widget.extend({
      */
     destroy: function () {
         this.$('.s_countdown_end_redirect_message').remove();
-        this.$('canvas').remove();
         this.$('.s_countdown_end_message').addClass('d-none');
         this.$('.s_countdown_text_wrapper').remove();
         this.$('.s_countdown_canvas_wrapper').removeClass('d-none');
+        this.$('.s_countdown_canvas_flex').remove();
 
         clearInterval(this.setInterval);
         this._super(...arguments);
@@ -125,7 +126,7 @@ const CountdownWidget = publicWidget.Widget.extend({
         this.diff = [];
         if (this._isUnitVisible('d') && !(this.onlyOneUnit && delta < 86400)) {
             this.diff.push({
-                canvas: $('<canvas/>', {class: 'o_temp_auto_element'}).appendTo(this.$wrapper)[0],
+                canvas: $('<div class="s_countdown_canvas_flex o_temp_auto_element"><canvas class="w-100"/></div>').appendTo(this.$wrapper)[0],
                 // There is no logical number of unit (total) on which day units
                 //  can be compared against, so we use an arbitrary number.
                 total: 15,
@@ -135,7 +136,7 @@ const CountdownWidget = publicWidget.Widget.extend({
         }
         if (this._isUnitVisible('h') || (this.onlyOneUnit && delta < 86400 && delta > 3600)) {
             this.diff.push({
-                canvas: $('<canvas/>', {class: 'o_temp_auto_element'}).appendTo(this.$wrapper)[0],
+                canvas: $('<div class="s_countdown_canvas_flex o_temp_auto_element"><canvas class="w-100"/></div>').appendTo(this.$wrapper)[0],
                 total: 24,
                 label: _t("Hours"),
                 nbSeconds: 3600,
@@ -143,7 +144,7 @@ const CountdownWidget = publicWidget.Widget.extend({
         }
         if (this._isUnitVisible('m') || (this.onlyOneUnit && delta < 3600 && delta > 60)) {
             this.diff.push({
-                canvas: $('<canvas/>', {class: 'o_temp_auto_element'}).appendTo(this.$wrapper)[0],
+                canvas: $('<div class="s_countdown_canvas_flex o_temp_auto_element"><canvas class="w-100"/></div>').appendTo(this.$wrapper)[0],
                 total: 60,
                 label: _t("Minutes"),
                 nbSeconds: 60,
@@ -151,7 +152,7 @@ const CountdownWidget = publicWidget.Widget.extend({
         }
         if (this._isUnitVisible('s') || (this.onlyOneUnit && delta < 60)) {
             this.diff.push({
-                canvas: $('<canvas/>', {class: 'o_temp_auto_element'}).appendTo(this.$wrapper)[0],
+                canvas: $('<div class="s_countdown_canvas_flex o_temp_auto_element"><canvas class="w-100"/></div>').appendTo(this.$wrapper)[0],
                 total: 60,
                 label: _t("Seconds"),
                 nbSeconds: 1,
@@ -175,16 +176,17 @@ const CountdownWidget = publicWidget.Widget.extend({
      * @private
      */
     _render: function () {
+
         // If only one unit mode, restart widget on unit change to populate diff
         if (this.onlyOneUnit && this._getDelta() < this.diff[0].nbSeconds) {
-            this.$('canvas').remove();
+            this.$('.s_countdown_canvas_flex').remove();
             this._initTimeDiff();
         }
         this._updateTimeDiff();
 
         const hideCountdown = this.isFinished && !this.editableMode && this.$el.hasClass('hide-countdown');
         if (this.layout === 'text') {
-            this.$('canvas').addClass('d-none');
+            this.$('.s_countdown_canvas_flex').addClass('d-none');
             if (!this.$textWrapper) {
                 this.$textWrapper = $('<span/>').attr({
                     class: 's_countdown_text_wrapper d-none',
@@ -202,7 +204,7 @@ const CountdownWidget = publicWidget.Widget.extend({
             this.$('.s_countdown_text').text(countdownText.toLowerCase());
         } else {
             for (const val of this.diff) {
-                const canvas = val.canvas;
+                const canvas = val.canvas.querySelector('canvas');
                 const ctx = canvas.getContext("2d");
                 ctx.canvas.width = this.width;
                 ctx.canvas.height = this.size;
@@ -224,7 +226,7 @@ const CountdownWidget = publicWidget.Widget.extend({
                 if (this.progressBarStyle !== 'none') {
                     this._drawProgressBar(ctx, val.nb, val.total, this.progressBarWeight === 'thin');
                 }
-                $(canvas).toggleClass('mx-2', this.layout === 'boxes');
+                this.$('.s_countdown_canvas_flex').toggleClass('mx-1', this.layout === 'boxes');
             }
         }