diff --git a/src/App.vue b/src/App.vue
index 6f505c1..cbcd65b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,7 @@
 <template>
     <div id="main-attendees">
         <md-layout md-gutter md-row>
-            <md-layout md-column md-flex="20" md-gutter>
+            <md-layout id="datepicker-column" md-column md-flex="20" md-gutter>
                 <datepicker id="datepicker" :value="date" :inline="true" :highlighted="highlightedDates" @selected="getDay"></datepicker>
             </md-layout>
             <md-layout id="panel" md-column>
@@ -142,6 +142,10 @@ export default {
     margin-top: 0px;
 }
 
+#datepicker-column {
+    min-width: 320px;
+}
+
 #datepicker {
     padding: 10px;
 }