Fix small screen views

abhigyanghosh30 · Oct 1, 2024 · 99be82e · 99be82e
1 parent 40bfbaf
commit 99be82e
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 10 deletions.
diff --git 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
@@ -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 {