wrapping the home ad and footer in a parent and positioning the parent.

Author: connors

docs/assets/css/docs.css

@@ -34,8 +34,7 @@ body {
   min-height: 750px;
 }
 .docs-header .carbonad {
-  position: absolute !important;
-  bottom: 255px !important;
+  position: relative !important;
   margin-top: 0 !important;
   -webkit-animation-name: fadeintext;
   -moz-animation-name: fadeintext;
@@ -50,14 +49,21 @@ body {
   text-align: center;
 }
 
+.docs-header-bottom {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
 @media screen and (min-width: 768px) {
   .docs-header {
     min-height: 870px;
   }
   .docs-header .carbonad {
-    bottom: 259px !important;
     left: 50% !important;
     margin-left: -165px !important;
+    margin-bottom: 60px !important;
   }
 
   .docs-sub-header .carbonad {
@@ -537,10 +543,6 @@ body {
 }
 
 .docs-header .docs-footer {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
   margin-top: 0;
   border-top: 1px solid rgba(255, 255, 255, 0.1);
 }

docs/index.html

@@ -11,6 +11,8 @@
     <p class="version">Currently v2.0.0</p>
   </div>
 
-  {% include ad.html %}
-  {% include footer.html %}
+  <div class="docs-header-bottom">
+    {% include ad.html %}
+    {% include footer.html %}
+  </div>
 </div>

sass/docs.scss

@@ -35,8 +35,7 @@ body {
 
   // Ad on the homepage
   .carbonad {
-    position: absolute !important;
-    bottom: 255px !important;
+    position: relative !important;
     margin-top: 0 !important;
     @include animation-name(fadeintext);
     @include animation-duration(2s);
@@ -47,16 +46,22 @@ body {
     text-align: center;
   }
 }
+.docs-header-bottom {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
 // Desktop jumbotron
 @media screen and (min-width: 768px) {
   .docs-header {
     min-height: 870px;
 
     // Ads on the homepage
     .carbonad {
-      bottom: 259px !important;
       left: 50% !important;
       margin-left: -165px !important;
+      margin-bottom: 60px !important;
     }
   }
 
@@ -549,10 +554,6 @@ body {
 
 // Overrides for the homepage's footer
 .docs-header .docs-footer {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
   margin-top: 0;
   border-top: 1px solid rgba(255,255,255,.1);