diff --git a/umap/static/umap/css/popup.css b/umap/static/umap/css/popup.css
new file mode 100644
index 00000000..3ae02ead
--- /dev/null
+++ b/umap/static/umap/css/popup.css
@@ -0,0 +1,122 @@
+.umap-popup {
+    display: flex;
+    flex-flow: column nowrap;
+    height:100%;
+}
+
+.umap-popup-footer {
+    position: relative;
+    background-color: rgb(68, 68, 68);
+    color: white;
+    display: flex;
+    width: 100%;
+    margin-top: auto;
+    min-width: 99px;
+    border-radius: 2px;
+    max-height: 24px;
+    justify-content: space-around;
+}
+.umap-popup a:hover {
+    text-decoration: underline;
+}
+.popup-title {
+    display: flex;
+    align-items: center;
+}
+.popup-title .icon {
+    margin: 5px;
+}
+a[href^='mailto']::before {
+  content: '✉︎ ';
+}
+a[href^='tel']::before {
+  content: '☎︎ ';
+}
+address span {
+    padding-inline-end: 5px;
+}
+.osm-link {
+    margin-top: 10px;
+    text-align: end;
+    font-style: italic;
+}
+span.popup-icon {
+    padding: 5px;
+}
+.leaflet-popup-content {
+    min-width: 200px;
+    line-height: inherit;
+}
+.leaflet-popup-content-wrapper, .leaflet-popup-tip {
+    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
+}
+.leaflet-popup-content-wrapper {
+    border-radius: 4px;
+}
+.umap-popup-content {
+    max-height: 500px;
+    flex-grow: 1;
+    margin-bottom: 4px;
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+.umap-popup-content iframe {
+    min-width: 300px;
+    max-width: 100%;
+}
+.umap-popup-content tr:nth-child(odd) {
+   background-color: #f6f6f6;
+}
+.umap-popup-content th {
+    text-align: start;
+}
+.umap-popup-content td {
+    word-break: break-word;
+}
+.umap-popup-content th,
+.umap-popup-content td {
+    padding: 1px 3px;
+}
+.umap-popup-container {
+    flex-grow: 1;
+    margin-bottom: 10px;
+}
+.umap-popup-container ul {
+    list-style-type: disc;
+}
+.leaflet-control-toolbar,
+.leaflet-bar {
+    box-shadow: none;
+}
+.marker-cluster {
+    background-color: white;
+    width: 40px;
+    height: 40px;
+}
+.leaflet-contextmenu-icon {
+    display: none;
+}
+.umap-popup-large iframe {
+    /* See https://github.com/Leaflet/Leaflet/commit/61d746818b99d362108545c151a27f09d60960ee#commitcomment-6061847 */
+    max-width: 100% !important;
+    min-width: 500px;
+}
+.umap-popup-large .umap-popup-content {
+    width: 500px;
+}
+.umap-popup-content img {
+    max-width: 100%;
+}
+.umap-georss-link .popup-title {
+    text-align: center;
+}
+@media all and (max-width: 480px) {
+    .umap-popup-large iframe {
+        min-width: 300px;
+    }
+    .umap-popup-large .umap-popup-content {
+        width: 300px;
+    }
+}
diff --git a/umap/static/umap/map.css b/umap/static/umap/map.css
index 7faf6210..e58ba798 100644
--- a/umap/static/umap/map.css
+++ b/umap/static/umap/map.css
@@ -789,54 +789,6 @@ a.umap-control-caption,
     text-align: center;
 }
 
-/* ********************************* */
-/*           Popup                   */
-/* ********************************* */
-.umap-popup {
-    display: flex;
-    flex-flow: column nowrap;
-    height:100%;
-}
-
-.umap-popup-footer {
-    position: relative;
-    background-color: rgb(68, 68, 68);
-    color: white;
-    display: flex;
-    width: 100%;
-    margin-top: auto;
-    min-width: 99px;
-    border-radius: 2px;
-    max-height: 24px;
-    justify-content: space-around;
-}
-.umap-popup a:hover {
-    text-decoration: underline;
-}
-.popup-title {
-    display: flex;
-    align-items: center;
-}
-.popup-title .icon {
-    margin: 5px;
-}
-a[href^='mailto']::before {
-  content: '✉︎ ';
-}
-a[href^='tel']::before {
-  content: '☎︎ ';
-}
-address span {
-    padding-inline-end: 5px;
-}
-.osm-link {
-    margin-top: 10px;
-    text-align: end;
-    font-style: italic;
-}
-span.popup-icon {
-    padding: 5px;
-}
 
 
 /* ************* */
@@ -1167,75 +1119,6 @@ span.popup-icon {
 .leaflet-top, .leaflet-bottom {
     z-index: var(--zindex-controls);
 }
-.leaflet-popup-content {
-    min-width: 200px;
-    line-height: inherit;
-}
-.leaflet-popup-content-wrapper, .leaflet-popup-tip {
-    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
-}
-.leaflet-popup-content-wrapper {
-    border-radius: 4px;
-}
-.umap-popup-content {
-    max-height: 500px;
-    flex-grow: 1;
-    margin-bottom: 4px;
-    display: flex;
-    flex-direction: column;
-    overflow-y: auto;
-    overflow-x: hidden;
-}
-.umap-popup-content iframe {
-    min-width: 300px;
-    max-width: 100%;
-}
-.umap-popup-content tr:nth-child(odd) {
-   background-color: #f6f6f6;
-}
-.umap-popup-content th {
-    text-align: start;
-}
-.umap-popup-content td {
-    word-break: break-word;
-}
-.umap-popup-content th,
-.umap-popup-content td {
-    padding: 1px 3px;
-}
-.umap-popup-container {
-    flex-grow: 1;
-    margin-bottom: 10px;
-}
-.umap-popup-container ul {
-    list-style-type: disc;
-}
-.leaflet-control-toolbar,
-.leaflet-bar {
-    box-shadow: none;
-}
-.marker-cluster {
-    background-color: white;
-    width: 40px;
-    height: 40px;
-}
-.leaflet-contextmenu-icon {
-    display: none;
-}
-.umap-popup-large iframe {
-    /* See https://github.com/Leaflet/Leaflet/commit/61d746818b99d362108545c151a27f09d60960ee#commitcomment-6061847 */
-    max-width: 100% !important;
-    min-width: 500px;
-}
-.umap-popup-large .umap-popup-content {
-    width: 500px;
-}
-.umap-popup-content img {
-    max-width: 100%;
-}
-.umap-georss-link .popup-title {
-    text-align: center;
-}
 .leaflet-inplace-toolbar {
   z-index: var(--zindex-toolbar)!important;
 }
@@ -1311,12 +1194,6 @@ span.popup-icon {
     .umap-permanent-credits-container {
         max-width: 100%;
     }
-    .umap-popup-large iframe {
-        min-width: 300px;
-    }
-    .umap-popup-large .umap-popup-content {
-        width: 300px;
-    }
 
     .attribution-toggle {
         display: inline-block;
diff --git a/umap/templates/umap/css.html b/umap/templates/umap/css.html
index 66840380..67be78bf 100644
--- a/umap/templates/umap/css.html
+++ b/umap/templates/umap/css.html
@@ -24,6 +24,7 @@
 <link rel="stylesheet" href="{% static 'umap/font.css' %}" />
 <link rel="stylesheet" href="{% static 'umap/css/icon.css' %}" />
 <link rel="stylesheet" href="{% static 'umap/base.css' %}" />
+<link rel="stylesheet" href="{% static 'umap/css/popup.css' %}" />
 <link rel="stylesheet" href="{% static 'umap/css/form.css' %}" />
 <link rel="stylesheet" href="{% static 'umap/content.css' %}" />
 <link rel="stylesheet" href="{% static 'umap/nav.css' %}" />