Improve responsiveness

jasonlbeggs · jasonlbeggs · commit 406985097228 · 2019-05-19T13:06:59.000-04:00
diff --git a/public/index.html b/public/index.html
@@ -1,5 +1,6 @@
 <!doctype html>
 <html lang="en">
+
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
@@ -8,12 +9,13 @@
   <link rel="stylesheet" href="/build/tailwind.css">
   <title>Welcome to Tailwind!</title>
 </head>
+
 <body class="antialiased text-gray-900">
   <div class="bg-gray-700 min-h-screen flex items-center justify-center">
     <div class="max-w-2xl w-full">
       <div class="bg-white rounded p-8 shadow-lg">
-        <div class="flex -mx-6">
-          <div class="w-1/2 px-6">
+        <div class="flex flex-wrap -mx-6">
+          <div class="w-full md:w-1/2 px-6 mb-6 md:mb-0">
             <label class="block">
               <span class="text-gray-700">Input</span>
               <input type="email" class="mt-1 block w-full form-input" value="john@example.com">
@@ -40,7 +42,7 @@
               </select>
             </label>
           </div>
-          <div class="w-1/2 px-6">
+          <div class="w-full md:w-1/2 px-6">
             <div class="block">
               <span class="text-gray-700">Checkboxes</span>
               <div class="mt-2">
@@ -102,4 +104,5 @@
     </div>
   </div>
 </body>
+
 </html>
