storeEmail

src/components/ContactForm.css

@@ -1,30 +1,37 @@
 /* Style inputs, select elements and textareas */
-input[type=email], select, textarea{
+.contactInput
+input[type=email], select, textarea
+{
   width: 100%;
   padding: 3px;
   border: 1px solid #ccc;
   border-radius: 4px;
   box-sizing: border-box;
   resize: vertical;
-  background-color: #f26e0a;
+  background-color: white;
 
 }  
 
-input[type=submit] {
+.formForm input[type=submit]
+{
   background-color: #aa0404;
   color: white;
-  padding: 6px 10px;
   border: none;
   border-radius: 4px;
   cursor: pointer;
-  width: 50%;
+  width: auto;
   height: 25px;
 }
 
+div.flexCenter
+{
+  display: flex;
+}
 
   /* Style the label to display next to the inputs */
-  label 
+  .flexCenter label
   {
+    margin-left: 0;
     padding: 2px 12px 2px 0;
     display: inline-block;
   }
@@ -34,6 +41,8 @@ input[type=submit] {
     display: flex;
     flex-direction: row;
     justify-content: center;
+    text-align: left;
+
   }
   .containerForm
   {
@@ -43,30 +52,31 @@ input[type=submit] {
     background-color: #f6602e;
     padding: 20px;
     justify-content: center;   
-    width: 400px;
+    width: 60%;
   }
   
   .formForm
   {
     display: flex;
     flex-direction: column;
-    max-width: 600px;
+    width: 100%;
+    align-items: flex-end;
   }
   
   
   /* Floating column for labels: 25% width */
-  .col-25 
+  .col-30 
   {
     float: left;
-    width: 25%;
+    width: 30%;
     margin-top: 6px;
   }
   
   /* Floating column for inputs: 75% width */
-  .col-75 
+  .col-70 
   {
     float: left;
-    width: 75%;
+    width: 70%;
     margin-top: 6px;
   }
   
@@ -75,6 +85,7 @@ input[type=submit] {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
+    width: 100%;
 }
   
   .row