diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index 56b2a599..3bb03771 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -13,7 +13,7 @@
 //= require jquery
 //= require jquery_ujs
 //= require turbolinks
-//= require jquery-ui
+//= require jquery-ui/dialog
 //= require_tree .
 
-
+ function viewportWidth() { return (window.innerWidth > 0) ? window.innerWidth : screen.width; }
diff --git a/app/assets/javascripts/modals.js b/app/assets/javascripts/modals.js
index ee475387..2136bb8b 100644
--- a/app/assets/javascripts/modals.js
+++ b/app/assets/javascripts/modals.js
@@ -1,5 +1,12 @@
+var minimumWidthToDisplayModal = 768;
 var modal;
+
 function loadModal(modalTarget) {
+  console.log(viewportWidth());
+  if(viewportWidth() < minimumWidthToDisplayModal) {
+    return function(evt) { console.debug("Modal not displayed because minimum width not met") }
+  }
+
   return function(evt) {
     evt.preventDefault();
     return $("#modal").load(modalTarget).dialog({
@@ -12,11 +19,16 @@ function loadModal(modalTarget) {
   }
 }
 function closeModal() { modal.dialog('close') }
+
 function ready() {
-  $('#login').click(loadModal('/signin'));
+  $('#login').on('click', function(evt) { 
+    loadModal('/signin')(evt)
+  });
+
   $('.tea-time-scheduling').on('click', function(evt) {
     modal = loadModal(evt.currentTarget.href)(evt)
   });
+
   $('a.cancel').on('click', function(evt) {
     console.log(evt)
     evt.preventDefault();
diff --git a/app/assets/stylesheets/application.css.less b/app/assets/stylesheets/application.css.less
index 14fa9696..7ba3f348 100644
--- a/app/assets/stylesheets/application.css.less
+++ b/app/assets/stylesheets/application.css.less
@@ -12,6 +12,6 @@
  *
  *= require_self
  *= require_tree ./
- *= require jquery-ui
+ *= require jquery-ui/dialog
  */