Make home page responsive and fix element overlap issues (#136)

Author: Rakielle

css/index.css

@@ -253,7 +253,6 @@ header .cta-section {
 
 .news-box {
   /* width: 450px; */
-  max-height: 150px;
   display: flex;
   background: var(--bc-gray-light);
   margin-right: 20px;
@@ -280,6 +279,7 @@ header .cta-section {
 .news-box-content {
   padding: 5px 15px;
   background-color: rgba(0, 0, 0, 0.05);
+  height: auto;
 }
 
 .news-box-cta {
@@ -428,7 +428,13 @@ header .subpage-description {
   .cta-section button{
     margin-top: 10px;
   }
-
+  .page-wrapper {
+    margin-top: 5px;
+  }
+  
+  .landing-description p {
+    font-size: 16px;
+  }
   .subpage-title-back {
     flex-direction: column;
   }

index.html

@@ -324,6 +324,6 @@ <h6>Social</h6>
   <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
-  <script type="text/javascript" src="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>
+  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>
   <script src="./js/script.js"></script>
 </html>