From 99be82e8a5b9244242ea03d16cd6d3d05139d08a Mon Sep 17 00:00:00 2001
From: minkyngkm <min.kim@canonical.com>
Date: Tue, 1 Oct 2024 15:34:04 +0100
Subject: [PATCH] Fix small screen views

---
 static/sass/_pattern_distributor.scss | 17 ++++++++++++-----
 static/sass/_pattern_subscribe.scss   | 13 ++++++++-----
 2 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/static/sass/_pattern_distributor.scss b/static/sass/_pattern_distributor.scss
index c92e22c0634..aa4381ab212 100644
--- a/static/sass/_pattern_distributor.scss
+++ b/static/sass/_pattern_distributor.scss
@@ -1,6 +1,18 @@
 @mixin ubuntu-p-distributor {
   .distributor-shop-selector {
     counter-reset: headings;
+    .p-stepped-list__title {
+      margin-bottom: 2rem;
+
+      &::before {
+        align-items: center;
+        border: 1px solid #000;
+        border-radius: 50%;
+        content: counter(p-stepped-list-counter);
+        text-align: center;
+        font-size: 1rem;
+      }
+    }
   }
 
   @media screen and (min-width: $breakpoint-large) {
@@ -11,14 +23,9 @@
         width: $breakpoint-x-small + 100px;
 
         &::before {
-          align-items: center;
-          border: 1px solid #000;
-          border-radius: 50%;
-          content: counter(p-stepped-list-counter);
           font-size: 1.5rem;
           height: 2.5rem;
           line-height: 2.5rem;
-          text-align: center;
           width: 2.5rem;
         }
       }
diff --git a/static/sass/_pattern_subscribe.scss b/static/sass/_pattern_subscribe.scss
index 9f6d7ed52f4..04916cabf68 100644
--- a/static/sass/_pattern_subscribe.scss
+++ b/static/sass/_pattern_subscribe.scss
@@ -1,6 +1,14 @@
 @mixin ubuntu-p-ua-subscribe {
   .product-selector {
     counter-reset: headings;
+    .p-stepped-list__title {
+      margin-bottom: 2rem;
+
+      &::before {
+        content: counter(p-stepped-list-counter);
+        width: 2rem;
+      }
+    }
   }
 
   @media screen and (min-width: $breakpoint-large) {
@@ -9,11 +17,6 @@
 
       .p-stepped-list__title {
         padding-left: 3.7rem;
-
-        &::before {
-          content: counter(p-stepped-list-counter);
-          width: 2rem;
-        }
       }
 
       > .p-stepped-list > .p-stepped-list__item {