Fix form css

Thomasevano · Feb 14, 2021 · 68c23dc · 68c23dc
1 parent be8b261
commit 68c23dc
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 3 deletions.
diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css
@@ -9,3 +9,9 @@ form input:focus-within ~ label,
 input[type="date"] ~ label {
   @apply transform scale-75 -translate-y-6;
 }
+
+@media (max-width: 768px) {
+  input[type="date"] {
+    margin-top: 3rem;
+  }
+}
diff --git a/components/atoms/Input.vue b/components/atoms/Input.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex-1 relative my-4 m-2 border-b-2 focus-within:border-black">
+  <div class="flex-1 relative my-6 m-2 border-b-2 focus-within:border-black">
     <input
       :type="inputType"
       :id="inputId"

diff --git a/components/atoms/Select.vue b/components/atoms/Select.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex-1 m-2">
+  <div class="flex-1 relative my-6 m-2">
     <div class="relative">
       <select
         class="block w-full appearance-none bg-transparent border-b-2 focus:outline-none focus-within:border-black"

diff --git a/pages/index.vue b/pages/index.vue
@@ -169,7 +169,7 @@ export default {
   font-weight: bold;
   font-size: 2rem;
   text-transform: uppercase;
-  margin-bottom: 40px;
+  margin: 40px 0;
 }
 
 .latest-articles {
@@ -268,6 +268,10 @@ export default {
     margin: 40px auto;
   }
 
+  .button {
+    margin-left: 15px;
+  }
+
   .first-article-img {
     height: 500px;
   }