[Site] Fixed Docs page responsiveness

Signed-off-by: Nikhil Sharma <[email protected]>
layer5io · Aug 11, 2021 · 9e782b6 · 9e782b6
1 parent bc99690
commit 9e782b6
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 9 deletions.
diff --git a/docs/_sass/getnighthawk.scss b/docs/_sass/getnighthawk.scss
@@ -5924,9 +5924,15 @@ div.globalFooterCard.card-environment {
   .hero-section-para p{
     text-align: center;
     margin-top: 1rem;
+    line-height: 1.5;
   }
 }
 @media (max-width: 550px) {
+  .why-getnighthawk-p-div p{
+    line-height: 1.6;
+    padding:0 .5rem;
+    font-size: 1.1rem;
+  }
   .hero-section-header-text{
     width: 425px;
   }
@@ -5949,10 +5955,6 @@ div.globalFooterCard.card-environment {
   .hero-section-button-div {
     width: 99vw;
   }
-  .hero-section-img {
-    width: 200px;
-    height: 200px;
-  }
   .hero-section-logo-span {
     font-size: 40px;
   }
@@ -5962,8 +5964,8 @@ div.globalFooterCard.card-environment {
   .hero-section-logo-span{
     font-size: 27px;
   }
-  .hero-section-para p{
-    font-size: 14px;
+  .hero-section-img{
+    margin-right: 0;
   }
 }
 
@@ -6070,6 +6072,10 @@ margin: 0;
   color: #696969;
 }
 
+.doc-sidebar{
+  padding:0 1rem;
+}
+
 
 .sidebar{
   font-family: 'Open Sans', sans-serif;
@@ -6143,6 +6149,14 @@ margin: 0;
   .nighthawk-meshery-div {
     margin: 0;
   }
+  .docs-section{
+    padding-left: 40px !important;
+
+    &-main{
+      margin-bottom: 40px !important;
+      margin-top: 50px !important;
+    }
+  }
 }
 @media only screen and (max-width: 500px) {
   .nighthawk-desc-text {

diff --git a/docs/pages/docs.html b/docs/pages/docs.html
@@ -92,7 +92,7 @@
         </button>
 
         <div class="collapse navbar-collapse" id="navbarSupportedContent">
-          <ul class="sidebar">
+          <ul class="sidebar doc-sidebar">
 
             <div class="accordion" id="accordionExample">
               {% for docs in site.data.docs %}
@@ -125,7 +125,7 @@ <h5>
         </div>
       </nav>
     </div>
-    <div class="col-lg-9">
+    <div class="col-lg-9 docs-section">
       <div class="hero-section-header docs-section-header">
         <img
           src="{{ site.baseurl }}/assets/images/logos/getnighthawk-logo-with-name.png"
@@ -138,7 +138,7 @@ <h5>
           The easiest way to get started with Nighthawk on any cloud or platform
         </p>
       </div>
-      <div class="newsletter-signup newsletter-div container-g">
+      <div class="newsletter-signup newsletter-div docs-section-main container-g">
         <div>
           <h4>Why GetNighthawk?</h4>
         </div>