Added some responsivity

map.css

@@ -15,8 +15,15 @@ html, body {
   border-radius: 0px;
 }
 
+
 .leaflet-popup-content-wrapper {
-  width: 400px;
+  width: 600px;
+  max-height: 400px;
+  overflow-y:auto
+}
+
+.leaflet-popup-content {
+    width:auto !important;
 }
 
 h4 {
@@ -27,14 +34,20 @@ h4 {
 table {
     padding-bottom: 10px;
     border-spacing: 0;
+    width: 100%
 }
 
-tr td:first-child {
+.desktop tr td {
+    padding-right: 5px;
+    width: 75;
+}
+
+.mobile tr td:first-child {
   padding: 0;
   padding-right: 10px;
 }
 
-.table tr:nth-child(2n) {
+.mobile tr:nth-child(2n) {
     background: rgb(244,244,244);
 }
 
@@ -50,3 +63,33 @@ tr td:first-child {
     top: 15px;
     right: 15px;
 }
+
+
+.mobile {
+    display: none;
+}
+
+@media screen and (max-width: 1000px) {
+    .leaflet-popup-content-wrapper {
+        width: 250px;
+    }
+
+    .desktop {
+        display: none;
+    }
+
+    .mobile {
+        display: block;
+        width: 213px;
+    }
+
+    h3, .text {
+        max-width: 150px;
+    }
+}
+
+@media screen and (max-height: 400px) {
+    .leaflet-popup-content-wrapper {
+        max-height: 150px;
+    }
+}

map.html

@@ -16,11 +16,12 @@
   <script id="popup-template" type="text/x-handlebars-template">
     <div id="resto-popup">
       <h3>{{name}} ({{capacity}} pl.)</h3>
-      Locatie: {{address}}<br />
-      Van {{period.start}} tot {{period.end}}<br />
       <img src="{{type}}.png" class="type">
+      <div class="text">Locatie: {{address}}<br />
+      Van {{period.start}} tot {{period.end}}
+      </div>
       <h4>Openingsuren</h4>
-      <table>
+      <table class="desktop">
       <tr>
       <td>Maandag</td>
         <td>Dinsdag</td>
@@ -40,7 +41,7 @@
         <td>{{#if hours.sunday}}{{hours.sunday}}{{else}}Gesloten{{/if}}</td>
       </tr>
       </table>
-      <table class="table">
+      <table class="mobile">
         <tr>
           <td>Maandag</td>
           <td>{{#if hours.monday}}{{hours.monday}}{{else}}Gesloten{{/if}}</td>