Style Refinement

Refining submit button alignment
OpenSTL · Mar 17, 2019 · 7413169 · 7413169
1 parent 52dcffb
commit 7413169
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 30 deletions.
diff --git a/app/.DS_Store b/app/.DS_Store
diff --git a/app/index.html b/app/index.html
@@ -93,13 +93,13 @@ <h2>Can I have backyard chickens?</h2>
         <div id="mapid">
 
         </div>
-        <div id=about>
+        <div id="about">
             <H1>About</H1>
             <p>The purpose of this project is to better communicate chicken regulations by 
                 municipality to the people of Saint Louis and Saint Louis County based on 
                 local municipality zoning regulations.<br>
                 This project was built by the Saint Louis Code for America Brigade, OpenSTL. 
-                This project is open source and is free to be reused and distributed.<br>
+                This project is open source and is free to be reused and distributed.<br><br>
                 The files can be found on the OpenSTL Backyard Chickens <a href="https://github.com/OpenDataSTL/backyard-chickens">GitHub Page</a>
             </p>
         </div>

diff --git a/app/style/main.css b/app/style/main.css
@@ -29,7 +29,9 @@ body {
   margin: 0px;
   background-color: var(--blue);
 }
-
+body p{
+  padding: 10px 0px;
+}
 .top {
   display: grid;
   background-color: white;
@@ -72,7 +74,6 @@ body {
   float:left;
 }
 
-
 .menu ul {
   display: grid;
   list-style: none;
@@ -98,14 +99,15 @@ body {
 
 .middle {
   max-width: 1200px;
-  margin: 10px auto;
+  margin: 20px auto;
   background-color: var(--blue);
   margin-bottom: 25px;
 }
 .middle p{
-  font-size: 18px;
+  font-size: 16px;
   text-align: center;
-  width: 90%;
+  width: 75%;
+  padding: 20px 30px;
   margin: 0px auto;
 }
 .middle h1 {
@@ -124,7 +126,7 @@ body {
   margin: 0px auto;
 }
 .search-container{
-  width: 80%;
+  width: 100%;
   display: inline-block;
 
 }
@@ -134,9 +136,7 @@ body {
   vertical-align: middle;
   text-align: left;
   width: 100%;
-  margin-bottom: 40px;
-  margin-left: 10%;
-
+  margin-bottom: 20px;
 }
 
 .form {
@@ -176,7 +176,7 @@ button[type="submit"] {
   line-height: 3rem;
   margin-top: auto;
   margin-bottom: auto;
-  float: right;
+  float: left;
 }
 
 input[id="address"],
@@ -220,9 +220,9 @@ textarea {
 
 #chickens-end {
   width: 100%;
-  height: 90%;
-  padding: 10px;
-
+}
+#chickens-end img{
+  width: 10%;
 }
 
 #links {
@@ -239,6 +239,9 @@ textarea {
 .chicken2 {
   transform: scaleX(-1);
 }
+#about p{
+  text-align: left;
+}
 
 @media (max-width: 1920px) {
   textarea {
@@ -253,24 +256,21 @@ textarea {
     text-align: center;
     vertical-align: middle;
   }
-
-  .top {
-    grid-template-areas:
-      "logo"
-      "menu";
-  }
-
   ul.menu-list {
     float: right;
     padding-right: 20px;
   }
-
   .menu ul {
     grid-template-columns: 200px 200px;
   }
 }
 
 @media (max-width: 800px) {
+  .top {
+    grid-template-areas:
+      "logo"
+      "menu";
+  }
   .logo h1{
     text-align: center;
   }
@@ -281,7 +281,7 @@ textarea {
     text-align: center;
     bottom: 0;
     width: 100%;
-    margin-top: 11vh;
+    margin-top: 0px;
     height: 100px;
   }
   .end>img {
@@ -291,25 +291,29 @@ textarea {
   .menu ul {
     grid-template-columns: none;
   }
+  .address{
+    margin-left: 0px;
+  }
   input[id="address"],
 textarea {
-  width: 100%;
-  }
-  button[type="submit"] {
-    float: inherit;
-    padding-left: 48%;
-    padding-top: 20px;
+  width: 80%;
   }
 }
 
   @media (max-width: 528px) {
     .top {
+      padding-top: 40px;
       grid-template-areas:
         "logo"
         "menu";
     }
     .end>img {
       margin-left: 20px;
+
+    }
+    #chickens-end img{
+      width: 10%;
+      height: auto;
     }
   }