From bfa625502638aca070fd65f522e9b0ee279ef372 Mon Sep 17 00:00:00 2001
From: Laura Alvarez <laura.alvare@talosdigital.com>
Date: Mon, 22 Oct 2018 16:53:14 -0500
Subject: [PATCH] responsive design and media queries

---
 .../example/css/footer.css                    | 39 +++++++++++--
 .../example/css/header.css                    | 40 ++++++++++---
 .../example/css/path.css                      | 11 +++-
 .../example/css/product.css                   | 57 ++++++++++++++++++-
 .../example/css/reset.css                     |  1 +
 5 files changed, 134 insertions(+), 14 deletions(-)

diff --git a/src/014-responsive-design/example/css/footer.css b/src/014-responsive-design/example/css/footer.css
index ae8fdb0..4d7a872 100755
--- a/src/014-responsive-design/example/css/footer.css
+++ b/src/014-responsive-design/example/css/footer.css
@@ -83,7 +83,6 @@
 
 .content-down {
   display: none;
-  padding-right: 30px;
 }
 
 .content-down p {
@@ -106,20 +105,52 @@
 }
 
 
-
-
 /* Small devices (landscape phones, 576px and up) */
 @media (min-width: 576px) {
 }
 
 /* Medium devices (tablets, 768px and up) */
 @media (min-width: 768px) {
+  .footer {
+    background-color: rgb(108,24,196);
+  }
+}
+
+@media (min-width: 769px) {
+  .dropdown-container {
+    flex-direction: row;
+    flex-wrap: wrap;
+    width: 100%;
+  }
+
+  .content-down {
+    display: initial; 
+  }
+
+  .dropdown-footer {
+    width: 50%;
+    padding: 0 20px 0 0;
+  }
+
+  .dropdown-footer .heading::after {
+    content: none;
+  }
 }
 
 /* Large devices (desktops, 992px and up) */
-@media (min-width: 992px) {
+@media (min-width: 1024px) {
+  .footer {
+    background-color: rgb(255,99,37);
+  }
 }
 
 /* Extra large devices (large desktops, 1200px and up)*/
 @media (min-width: 1200px) {
+  .footer {
+    background-color: #e91e63;
+  }
+
+  .dropdown-footer {
+    width: 25%;
+  }
 }
diff --git a/src/014-responsive-design/example/css/header.css b/src/014-responsive-design/example/css/header.css
index 5e89805..6fcd7f9 100755
--- a/src/014-responsive-design/example/css/header.css
+++ b/src/014-responsive-design/example/css/header.css
@@ -64,6 +64,11 @@ nav.navbar-no-scroll {
   text-transform: uppercase;
 }
 
+#menu {
+  margin-left: auto;
+  padding-right: 20px;
+}
+
 .navbar #menu a::after {
   content: '';
   display: block;
@@ -117,28 +122,49 @@ nav.navbar-no-scroll {
   background-color: #e0e0e0;
 }
 
-.navbar #responsive-menu-toggle,
-.navbar #menu {
-  display: none;
-}
-
 .navbar #responsive-menu-toggle:checked + #responsive-menu {
   width: 240px;
   padding-top: 60px;
 }
 
 /* Small devices (landscape phones, 576px and up) */
-@media (min-width: 576px) {
+@media (max-width: 767px) {
+  .navbar #responsive-menu-toggle, .navbar #menu {
+    display: none;
+  }
 }
 
 /* Medium devices (tablets, 768px and up) */
 @media (min-width: 768px) {
+  nav.navbar-scroll {
+    background-color: rgb(108,24,196);
+  }
+
+  .responsive-icon, #responsive-menu-toggle {
+    display: none;
+  }
+
+  .navbar ul, .logo {
+    margin: 25px;
+    display: flex;
+    align-items: center;
+  }
+
+  .navbar ul li {
+    padding-left: 45px;
+  }
 }
 
 /* Large devices (desktops, 992px and up) */
-@media (min-width: 992px) {
+@media (min-width: 1024px) {
+  nav.navbar-scroll {
+    background-color: rgb(255,99,37);
+  }
 }
 
 /* Extra large devices (large desktops, 1200px and up)*/
 @media (min-width: 1200px) {
+  nav.navbar-scroll {
+    background-color: #e91e63;
+  }
 }
diff --git a/src/014-responsive-design/example/css/path.css b/src/014-responsive-design/example/css/path.css
index 6b5538e..485b72c 100755
--- a/src/014-responsive-design/example/css/path.css
+++ b/src/014-responsive-design/example/css/path.css
@@ -70,12 +70,21 @@
 
 /* Medium devices (tablets, 768px and up) */
 @media (min-width: 768px) {
+  .navigation a i {
+    color: rgb(108,24,196);
+  }
 }
 
 /* Large devices (desktops, 992px and up) */
-@media (min-width: 992px) {
+@media (min-width: 1024px) {
+  .navigation a i {
+    color: rgb(255,99,37);
+  }
 }
 
 /* Extra large devices (large desktops, 1200px and up)*/
 @media (min-width: 1200px) {
+  .navigation a i {
+    color: #e91e63;
+  }
 }
diff --git a/src/014-responsive-design/example/css/product.css b/src/014-responsive-design/example/css/product.css
index 7b84a05..5834dde 100755
--- a/src/014-responsive-design/example/css/product.css
+++ b/src/014-responsive-design/example/css/product.css
@@ -72,13 +72,66 @@
 }
 
 /* Medium devices (tablets, 768px and up) */
-@media (min-width: 768px) {
+@media (min-width: 769px) {
+  .product.content {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  .product {
+    flex-direction: row;
+  }
+
+  .product-thumbs {
+    flex-direction: column;
+    order: 1;
+    padding-top: 0;
+  }
+
+  .product-slider {
+    width: 50%;
+    order: 2;
+  }
+
+  .product-description {
+    padding-top: 0;
+    padding-left: 15px;
+    width: 34%;
+  }
+
+  .product-description p {
+    margin-top: 20px;
+    font-size: 1em;
+  }
+
+  .product-description h1, .product-description h2 {
+    font-size: 1.9em
+  }
 }
 
 /* Large devices (desktops, 992px and up) */
 @media (min-width: 992px) {
+  .product-description h1, .product-description h2 {
+    font-size: 2.2em;
+  }
+
+  .product-description p {
+    font-size: 1.5em;
+  }
+
+  .product-description {
+    width: 38%;
+  }
 }
 
 /* Extra large devices (large desktops, 1200px and up)*/
-@media (min-width: 1200px) {
+@media (min-width: 1025px) {
+  .discount-content {
+    text-align: right !important; 
+    padding-right: 40px;
+  }
+
+  .discount-content .button {
+    margin: 3% 0 !important;
+  }
 }
diff --git a/src/014-responsive-design/example/css/reset.css b/src/014-responsive-design/example/css/reset.css
index 383cdf5..e3e31a0 100755
--- a/src/014-responsive-design/example/css/reset.css
+++ b/src/014-responsive-design/example/css/reset.css
@@ -18,6 +18,7 @@ time, mark, audio, video {
   margin: 0;
   padding: 0;
   vertical-align: baseline;
+  box-sizing: border-box;
 }
 
 /* HTML5 display-role reset for older browsers */