From 4666cc96b567bdcd96069558eca673dad66a3fa7 Mon Sep 17 00:00:00 2001
From: Badri Sunderarajan <badrihippo@gmail.com>
Date: Fri, 10 Apr 2020 18:46:38 +0530
Subject: [PATCH] Make pages work better in different screen sizes

---
 src/index.htm | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

diff --git a/src/index.htm b/src/index.htm
index 7d67aa4..17833be 100644
--- a/src/index.htm
+++ b/src/index.htm
@@ -65,7 +65,7 @@
         </div>
       </div>
       <div class="bg-white flex flex-wrap mx-auto my-16 shadow-xl sm:mx-4 rounded">
-        <div class="sm:w-auto md:w-auto lg:w-1/3 p-4">
+        <div class="xs:w-auto sm:w-full md:w-1/3 lg:w-1/3 p-4">
           <a name="pricing">
             <h2 class="text-center uppercase">Price</h2>
           </a>
@@ -73,7 +73,7 @@
           <p class="text-center text-lg my-2">That's right—it's free!</p>
           <p class="text-sm">You can even earn money through the <a href="//medium.com/creators" target="_blank" class="text-orange-800 hover:text-orange-900">Medium Partner Programme</a>. We're working on setting up our some monetisation strategy ourselves: let us know if you want to know more.</p>
         </div>
-        <div class="sm:w-full md:w-auto lg:w-1/3 p-4">
+        <div class="xs:w-full sm:w-1/2 md:w-1/3 lg:w-1/3 p-4">
           <h2 class="text-center uppercase">You give us</h2>
           <ul class="list-chevron m-3">
             <li>Content written in the Snipette Style</li>
@@ -82,7 +82,7 @@
             <li>Good company to work with ;)</li>
           </ul>
         </div>
-        <div class="sm:w-full md:w-auto lg:w-1/3 p-4">
+        <div class="xs:w-full sm:w-1/2 md:w-1/3 lg:w-1/3 p-4">
           <h2 class="text-center uppercase">We give you</h2>
           <ul class="list-chevron m-3">
             <li>Help and guidance creating your piece</li>
@@ -94,15 +94,14 @@
       </div>
     </div>
     <div class="bg-orange-900 text-orange-100">
-      <div class="max-w-4xl mx-auto flex flex-wrap content-center">
+      <div class="max-w-4xl mx-auto flex flex-wrap justify-center">
         <img src="img/pup-with-penknife.png" class="w-auto h-48">
-        <div class="w-auto my-auto ml-10">
-          <div class="w-auto">
-            <p class="text-3xl text-orange-200">Ready to give us a spin?
-              <a href="//goo.gl/forms/NAf4TRKFBZ73v9C02"class="text-base m-4 p-4 bg-orange-500 text-orange-900 uppercase rounded">Apply Now</a>
-            </p>
+        <div class="w-auto my-auto sm:mx-auto md:ml-10">
+          <div class="w-auto flex flex-wrap justify-center sm:justify-start">
+            <p class="text-3xl text-orange-200 my-auto text-center sm:text-left m-2">Ready to give us a spin?</p>
+            <a href="//goo.gl/forms/NAf4TRKFBZ73v9C02"class="text-base m-4 p-4 border-2 border-solid border-orange-500 text-orange-500 uppercase rounded">Apply Now</a>
           </div>
-          <p class="text-sm text-orange-200 text-center">Or, email <a href="mailto:editors@snipettemag.com" class="text-orange-300">editors@snipettemag.com</a> to know more</p>
+          <p class="text-sm text-orange-200 text-center sm:text-left m-3">Or, email <a href="mailto:editors@snipettemag.com" class="text-orange-300">editors@snipettemag.com</a> to know more</p>
         </div>
       </div>
     </div>