From 0d1193852d715ee8886b4298041bb758a100f368 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jaime=20Alan=20Guti=C3=A9rrez=20Cruz?=
 <33694882+jagcruz@users.noreply.github.com>
Date: Sun, 8 Sep 2024 21:58:34 -0300
Subject: [PATCH] style: adjust grid layout and responsive design in ranking
 page

---
 src/layouts/Base.astro         |  1 +
 src/pages/ranking/[user].astro | 19 ++++++++++++++-----
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/layouts/Base.astro b/src/layouts/Base.astro
index bb6f996..06b5507 100644
--- 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
index 9ee887c..8fbdf74 100644
--- 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;
+      }
     }
   }