diff --git a/includes/headfoot.html b/includes/headfoot.html
index e980372d1855896cd740f9564e6b29ae0d7c9bd2..c42dbab7bfb4bff9d396b38a73d399602fdab5be 100644
--- a/includes/headfoot.html
+++ b/includes/headfoot.html
@@ -12,6 +12,23 @@
         <link rel="stylesheet" href="../fonts/ionicons.min.css">
         <link rel="stylesheet" href="../css/Testimonials.css">
         <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
+        <style>
+            @media only screen and (min-width: 768px) {
+                html {
+                    position: relative;
+                    min-height: 100%;
+                }
+                body {
+                    margin-bottom: 120px; /* Margin bottom by footer height */
+                }
+                #homepage {
+                    position: absolute;
+                    bottom: 0;
+                    width: 100%;
+                    text-align: center;
+                }
+            }
+        </style>
     </head>
 
     <body>
@@ -124,7 +141,7 @@
             <p> test test test test 123</p>
             <p> test test test test</p>
             <p> test test test test</p>
-            <p> test test test test</p>
+            <!-- p> test test test test</p>
             <hr>
             <p> test test test test</p>
             <p> test test test test</p>
@@ -136,12 +153,12 @@
             <p> test test test test</p>
             <p> test test test test</p>
             <p> test test test test</p>
-            <p> test test test test</p>
+            <p> test test test test</p -->
             <hr>
         </div>
 
         <!-- footerdiv -->
-        <div id="homepage" class="last clear">
+        <div id="homepage">
             <hr>
             <!-- containerdiv -->
             <div class="container">
diff --git a/js/headfoot.js b/js/headfoot.js
index befd4c61047f298321f4106dacb3dbf07355b965..cf5bd4c3c4b520ea842288a7291feb0e3c5f60c9 100755
--- a/js/headfoot.js
+++ b/js/headfoot.js
@@ -140,9 +140,31 @@ function head() {
  */
 
 function foot() {
+    // add styles to <head> to manage sticky footer
+    var styles = `
+        @media only screen and (min-width: 768px) {
+            html {
+                position: relative;
+                min-height: 100%;
+            }
+            body {
+                margin-bottom: 120px; /* Margin bottom by footer height */
+            }
+            #homepage {
+                position: absolute;
+                bottom: 0;
+                width: 100%;
+                text-align: center;
+            }
+        }
+    `
+    var styleSheet = document.createElement("style")
+    styleSheet.type = "text/css"
+    styleSheet.innerText = styles
+    document.head.appendChild(styleSheet)
+    
     let footerdiv = document.createElement('div');
     footerdiv.id="homepage";
-    footerdiv.classList.add("last", "clear");
     footerdiv.innerHTML = "<hr>";
     let containerdiv = document.createElement('div');
     containerdiv.classList.add('container');
