fixed conflicts

index.html

@@ -34,8 +34,21 @@
   </span>
 
   </div>
+  <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 class="row">
   <!-- background audio -->
   <div class="col-md-9">
@@ -205,16 +218,6 @@ $(".draggable i.remove-elem").off('click').on("click", function(){
 
 <script>
 
-// function popup_bg(start,end){
-//   var myIcon = document.querySelector(".audioBG");
-//   var box = document.getElementById("audioBG");
-//   box.currentTime = start;
-//   myIcon.className = "audioBG fa fa-pause";
-//   box.play();
-//   console.log(box.currentTime);
-//   setTimeout(() => { myIcon.className = "audioBG fa fa-play";box.pause(); console.log(box.currentTime);}, end);
-//     }
-
 function popup_box(audioid,box){
   var myIcon = document.querySelector("."+box);
   var audio = document.getElementById(audioid);
@@ -345,7 +348,13 @@ $("#about").click(function(){
 
 
 </script>
-
+<script>
+    $(document).ready(function(){
+      if (screen.width < 768) {
+        $("#myModal").modal('show');
+      }
+    });
+</script>
 
 
 </div>