From 410d7dd828129b1bab14130262184e406c583cdd Mon Sep 17 00:00:00 2001
From: Hippo <badrihippo@gmail.com>
Date: Tue, 28 Dec 2021 18:04:10 +0530
Subject: [PATCH] Make donation option boxes responsive

---
 src/index.htm | 4 ++--
 src/style.css | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/index.htm b/src/index.htm
index fb929ed..4011307 100644
--- a/src/index.htm
+++ b/src/index.htm
@@ -112,11 +112,11 @@
     </div>
     <!-- Here, the floating donation box ceases to float -->
 
-    <div class="text-green-900 w-full md:w-3/5 lg:w-3/40">
+    <div class="w-full">
       <div class="max-w-4xl mx-auto p-10">
         <h1 class="text-center text-2xl font-sans">Donation options</h1>
 
-        <ul class="my-10 grid grid-cols-3 gap-3">
+        <ul class="my-10 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3">
           <label class="donate-option">
             <input type="radio" name="amount" value="250">
             <li>
diff --git a/src/style.css b/src/style.css
index 286cd3f..5186d2d 100644
--- a/src/style.css
+++ b/src/style.css
@@ -7,7 +7,7 @@
 }
 
 .donate-option > li {
-  @apply row-auto text-center inline-block p-10 bg-white rounded-md text-black border-2 border-white hover:border-green-500 hover:cursor-pointer h-full;
+  @apply row-auto text-center inline-block p-10 bg-white rounded-md text-black border-2 border-white hover:border-green-500 hover:cursor-pointer h-full w-full;
 }
 
 .donate-option > input:checked + li {
@@ -15,7 +15,7 @@
 }
 
 .input-custom {
-  @apply bg-inherit border-inherit inline-block text-center overflow-visible p-3;
+  @apply bg-inherit border-inherit inline-block text-center overflow-visible p-3 mx-auto;
 }
 
 .donate-option > input:checked + li:hover .input-custom {