ENH: [QuestionCard.astro] made padding smaller on mobile

LyonSyonII · Dec 15, 2023 · ca2921b · ca2921b
1 parent 13c1705
commit ca2921b
Showing 1 changed file with 8 additions and 2 deletions.
diff --git a/frontend/src/components/QuestionCard.astro b/frontend/src/components/QuestionCard.astro
@@ -6,7 +6,7 @@ interface Props {
 const { question } = Astro.props;
 ---
 
-<article class="card">
+<article>
   {question && <p id={question}>{question}</p>}
   <slot />
 </article>
@@ -18,9 +18,15 @@ const { question } = Astro.props;
     display: flex;
     border: 1px solid var(--sl-color-gray-5);
     background-color: var(--sl-color-black);
-    padding: clamp(1rem, calc(0.125rem + 3vw), 1rem);
+    padding: 0.5rem;
     flex-direction: column;
     gap: clamp(0.5rem, calc(0.125rem + 1vw), 1rem);
     overflow: auto;
   }
+
+  @media only screen and (min-width: 768px) {
+    article {
+      padding: clamp(1rem, calc(0.125rem + 3vw), 1rem);
+    }
+  }
 </style>