style: adjust grid layout and responsive design in ranking page

UXCorpRangel · Sep 9, 2024 · 0d11938 · 0d11938
1 parent 977e257
commit 0d11938
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 5 deletions.
diff --git a/src/layouts/Base.astro b/src/layouts/Base.astro
@@ -1,6 +1,7 @@
 ---
 /*
 Breakpoints:
+  - Extra Small: 411px
   - Small: 640px
   - Medium: 768px
   - Large: 1024px

diff --git a/src/pages/ranking/[user].astro b/src/pages/ranking/[user].astro
@@ -88,10 +88,8 @@ const totalCards = formatNumber(cards.length, DIGITS);
     }
 
     .user-wrapper {
-      grid-column: 1 / 2;
-      position: sticky;
-      top: 4.7rem;
-      height: 56vh;
+      position: relative;
+      grid-column: 1 / 3;
       display: flex;
       flex-direction: column;
       align-items: center;
@@ -101,6 +99,13 @@ const totalCards = formatNumber(cards.length, DIGITS);
       background-color: var(--card-bgcolor-1);
       font-family: var(--font-family-primary);
 
+      @media (width > 640px) {
+        grid-column: 1 / 2;
+        position: sticky;
+        top: 4.7rem;
+        height: 56vh;
+      }
+
       & .back-button {
         z-index: 10;
         padding: 0.5rem;
@@ -228,11 +233,15 @@ const totalCards = formatNumber(cards.length, DIGITS);
     }
 
     .cards-wrapper {
-      grid-column: 2 / 3;
+      grid-column: 1 / 3;
       display: flex;
 
       border-color: var(--primary-color);
       background-color: #0a0514;
+
+      @media (width > 640) {
+        grid-column: 2 / 3;
+      }
     }
   }