diff --git a/index.html b/index.html
index 97d315b..a810911 100644
--- a/index.html
+++ b/index.html
@@ -33,6 +33,22 @@
     <a href="#" >how to use</a>
   </span>
 
+  <div id="myModal" class="modal fade">
+      <div class="modal-dialog">
+          <div class="modal-content">
+              <div class="modal-header">
+                  <h5 class="modal-title">This website is better viewed on desktop</h5>
+                  <button type="button" class="close" data-dismiss="modal">&times;</button>
+              </div>
+              <div class="modal-body">
+                  <p>Sorry for that.</p>
+
+              </div>
+          </div>
+      </div>
+  </div>
+
+
   </div>
 
   </div>
@@ -188,7 +204,7 @@ $(document).ready(function() {
 
 <script>
 // function popup_bg(start,end) {
-  
+
 //   var myIcon = document.querySelector(".audioBG");
 //   var box = document.getElementById("audioBG");
 //     if (box.paused) {
@@ -201,7 +217,7 @@ $(document).ready(function() {
 // }
 //     // box.currentTime = start;
 //     // console.log(start);
-  
+
 // }
 
 
@@ -337,7 +353,13 @@ $("#about").click(function(){
 
 
 </script>
-
+<script>
+    $(document).ready(function(){
+      if (screen.width < 768) {
+        $("#myModal").modal('show');
+      }
+    });
+</script>
 
 
 </div>
diff --git a/static/css/style.css b/static/css/style.css
index c975296..ae34ace 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -458,6 +458,7 @@ color: #d81159;
 font-size: 16px;
 }
 
+
 /*#colophon {
   position: absolute;
   left: 50px;
@@ -482,7 +483,6 @@ font-size: 16px;
 =======
 }*/
 
->>>>>>> a4c562a74b0d98a69fcba45d31accdddf753cd2e
 
 #about a {
 text-decoration: none;
@@ -569,6 +569,7 @@ color: #d81159;
 #box1 {
   margin-left: 10px;
 }
+
 }
 
 .logo {