added media queries

Author: elena-in-code

src/app/app.component.css

@@ -41,3 +41,26 @@ hr {
   width: 75vw;
    border-color: rgba(243,243,243,.4);
 }
+
+/* +++++++++++++++++ media queries +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
+@media screen and (max-width: 380px) {
+  div.banner{
+    height: 40vh;
+  }
+  nav{
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: column;
+    justify-content: center;
+    height: 10vh;
+  }
+  a {
+    width: 68vw;
+    position: relative;
+    margin: 5px auto;
+
+  }
+  .banner {
+  margin-bottom: 15px;
+}
+}

src/app/completo/completo.component.css

@@ -1,3 +1,6 @@
+ul{
+  padding: 0px;
+}
 li.bookList {
   text-align: center;
   width: 50vw;
@@ -35,7 +38,7 @@ li.bookList {
 /*Book list of books recently visited :: nested ul inside of each recent user*/
 li.user-book-list {
   text-align: center;
-  margin:0.1em 2em 0.1em 0em;
+  margin:0.1em 2em 0.1em 2em;
   padding:0.2em ;
   list-style:none;
   font-weight: 550;
@@ -63,3 +66,10 @@ h3 {
   margin-top: 2px;
   margin-bottom: 2px;
 }
+/* +++++++++++++++++ media queries +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
+@media screen and (max-width: 400px) {
+  .conatiner-user-info{
+    top: 30%;
+  }
+}
+

src/app/search/search.component.css

@@ -1,3 +1,4 @@
+
 input {
   width: 200px;
   height: 30px;
@@ -54,3 +55,9 @@ li {
   border-right: 2px solid rgba(183,183,183,.7);
   cursor: pointer;
 }
+/* +++++++++++++++++ media queries +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
+@media screen and (max-width: 730px) {
+  ul{
+    padding: 0px;
+  }
+}