diff --git a/assets/component-discounts.css b/assets/component-discounts.css
index 0c01bc1d6ac..1a4ed6da7a9 100644
--- a/assets/component-discounts.css
+++ b/assets/component-discounts.css
@@ -12,8 +12,14 @@
   color: rgba(var(--color-button), var(--alpha-button-background));
 }
 
-.discounts__discount--end {
-  justify-content: flex-end;
+.discounts__discount--position {
+  justify-content: center;
+}
+
+@media screen and (min-width: 750px) {
+  .discounts__discount--position {
+    justify-content: flex-end;
+  }
 }
 
 .discounts__discount > .icon {
diff --git a/sections/main-cart-footer.liquid b/sections/main-cart-footer.liquid
index 10e30cbfd80..250921019e2 100644
--- a/sections/main-cart-footer.liquid
+++ b/sections/main-cart-footer.liquid
@@ -29,7 +29,7 @@
                   {%- if cart.cart_level_discount_applications.size > 0 -%}
                     <ul class="discounts list-unstyled" role="list" aria-label="{{ 'customer.order.discount' | t }}">
                       {%- for discount in cart.cart_level_discount_applications -%}
-                        <li class="discounts__discount discounts__discount--end">
+                        <li class="discounts__discount discounts__discount--position">
                           {%- render 'icon-discount' -%}
                           {{ discount.title }}
                           (-{{ discount.total_allocated_amount | money }})