Adapted to mobile draft 1

Author: Gable-github

about.js

@@ -62,4 +62,16 @@ $(document).ready(function(){
     };
   });
 
+  /// When you click everywhere in the document
+  $(document).click(function (event) {
+
+  /// If *navbar-collapse* is not among targets of event
+    if (!$(event.target).is('.navbar-collapse')) {
+
+      /// Collapse every *navbar-collapse*
+      $('.navbar-collapse').collapse('hide');
+
+    };
+  });
+
 });

consultations.html

@@ -56,7 +56,7 @@ <h1><u>Consultancy</u></h1>
       </div>
 
       <div class="row about-page-row1" id="row4">
-        <h1 style="padding-left: 15px"><u>Application</u></h1>
+        <h1><u>Application</u></h1>
         <div class="col-md-9">
           <p>We constantly work on new innovative ways of incorporating new ingredients into existing food products. Whether it is new recipe formulations or enhancements, Unifamm Trading is here to help you achieve your manufacturing and processing needs.</p>
         </div>

index.js

@@ -77,4 +77,16 @@ $(document).ready(function(){
     };
   });
 
+  /// When you click everywhere in the document
+  $(document).click(function (event) {
+
+  /// If *navbar-collapse* is not among targets of event
+    if (!$(event.target).is('.navbar-collapse')) {
+
+      /// Collapse every *navbar-collapse*
+      $('.navbar-collapse').collapse('hide');
+
+    };
+  });
+
 });

ingredients.css

@@ -1,7 +1,7 @@
 html {
   margin: 0;
   padding: 0;
-  box-sizing: border-box;
+  /* box-sizing: border-box; */
   overflow-y: scroll;
   overflow-x: hidden;
   scroll-behavior: smooth;
@@ -10,6 +10,7 @@ html {
 body {
   background-color: #fefad4;
   width: 100%;
+  position: relative;
 }
 
 nav {
@@ -19,7 +20,7 @@ nav {
 h1 {
   font-family: 'utopia-std-headline', serif;
   font-weight: 400;
-  font-size: 15vh;
+  font-size: 10vw;
   font-style: normal;
 }
 
@@ -62,7 +63,7 @@ img[alt="unifamm-logo"] {
 img[alt="powder1-img"] {
   position: absolute;
   left: 0;
-  height: 100vh;
+  /* height: 100%; */
   border-top-right-radius: 20px;
   border-bottom-right-radius: 20px;
   z-index: -1;
@@ -97,7 +98,7 @@ img[alt="powder1-img"] {
 .heading-h2 {
   font-family: 'utopia-std-headline', serif;
   font-weight: 600;
-  font-size: 3rem;
+  font-size: 5vw;
   color: #fefad4;
 }
 
@@ -220,17 +221,18 @@ img[alt="powder1-img"] {
 #questions-btn {
   font-family: "Montserrat", sans-serif;
   width: 100%;
-  height: 3rem;
+  height: 8vh;
   background-color: rgb(254,250,212);
   border: 1px solid rgb(0, 0, 0);
   transition: 0.3s;
   text-decoration: none;
   color: black;
-  width: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 20px;
+  padding: 5vh 3vw 5vh 3vw;
+  text-align: center;
 }
 
 #questions-btn:hover {
@@ -250,3 +252,23 @@ footer p {
   margin-top: 50px;
   margin-bottom: 0;
 }
+
+@media only screen and (max-width: 800px) {
+
+  .ingredients-page-heading-container-fluid {
+      text-align: right;
+      height: 50vh;
+      width: 100%;
+      display: flex;
+      align-items: center;
+      object-position: left;
+      margin-bottom: 3vh;
+      opacity: 0;
+      overflow-x: hidden;
+  }
+
+  img[alt="powder1-img"] {
+    width: 80%;
+  }
+
+}

ingredients.html

@@ -326,7 +326,7 @@ <h2 class="mb-0">
   </div>
 
   <div class="container" id="questions-btn-container">
-    <a href="index.html#contact" id="questions-btn">Questions on our products? Click to contact us!</a>
+    <a href="index.html#contact" id="questions-btn">Questions about our products? Click here to contact us!</a>
   </div>
 
 

ingredients.js

@@ -4,4 +4,16 @@ $(document).ready(function(){
     opacity: 1
   }, 1000);
 
+  /// When you click everywhere in the document
+  $(document).click(function (event) {
+
+  /// If *navbar-collapse* is not among targets of event
+    if (!$(event.target).is('.navbar-collapse *')) {
+
+      /// Collapse every *navbar-collapse*
+      $('.navbar-collapse').collapse('hide');
+
+    }
+  });
+
 });

styles.css

@@ -82,11 +82,21 @@ img[alt="unifamm-logo"] {
   }
 
   .whoAreWe-h1 {
-    font-size: 3.7rem !important;
+    font-size: 300% !important;
   }
 
   .second-container h1 {
-    font-size: 3.3rem !important;
+    font-size: 300% !important;
+    padding: 20% 0 20% 10% !important;
+  }
+
+  #consultationBox p {
+    margin: 5% 0 5% 0;
+  }
+
+  #ingredientBox {
+    bottom: 15%;
+    padding-top: 2%;
   }
 
   #img-container {
@@ -381,7 +391,7 @@ footer p {
 }
 
 .about-page-row1 h1 {
-  font-size: 4rem;
+  font-size: 500%;
   padding-left: 100px;
   padding-right: 100px;
 }
@@ -420,28 +430,32 @@ u {
 
   .about-page-row1 h1 {
     padding-left: 15px;
+    font-size: 250%;
   }
 
   #slogan {
     font-size: 2.5rem !important;
     width: 300px;
     display: inline-block;
-    padding-left: 50px;
   }
 
   p {
     font-size: 16px !important;
   }
 
   #unifamm-logo-about {
-    width: 20%;
+    width: 40%;
   }
 
   .supplierLogos {
     display: flex;
     justify-content: space-between;
     width: 120% !important;
   }
+
+  footer p {
+    font-size: 0.5rem !important;
+  }
 }
 
 /* consultations page */