diff --git a/css/style.css b/css/style.css
index 31f7ae0..cc5fd49 100644
--- a/css/style.css
+++ b/css/style.css
@@ -788,3 +788,136 @@ table.dataTable.display tbody tr:hover.selected {
 .leaflet-control-layers-selector[disabled] ~ span {
     color: #777;
 }
+
+/* make modals fullscreen on small devices (code from bootstrap 5) */
+.modal-fullscreen {
+    width: 100vw;
+    max-width: none;
+    height: 100%;
+    margin: 0;
+}
+.modal-fullscreen .modal-content {
+    height: 100%;
+    border: 0;
+    border-radius: 0;
+}
+.modal-fullscreen .modal-header {
+    border-radius: 0;
+}
+.modal-fullscreen .modal-body {
+    overflow-y: auto;
+}
+.modal-fullscreen .modal-footer {
+    border-radius: 0;
+}
+
+@media (max-width: 575.98px) {
+    .modal-fullscreen-sm-down {
+        width: 100vw;
+        max-width: none;
+        height: 100%;
+        margin: 0;
+    }
+    .modal-fullscreen-sm-down .modal-content {
+        height: 100%;
+        border: 0;
+        border-radius: 0;
+    }
+    .modal-fullscreen-sm-down .modal-header {
+        border-radius: 0;
+    }
+    .modal-fullscreen-sm-down .modal-body {
+        overflow-y: auto;
+    }
+    .modal-fullscreen-sm-down .modal-footer {
+        border-radius: 0;
+    }
+}
+@media (max-width: 767.98px) {
+    .modal-fullscreen-md-down {
+        width: 100vw;
+        max-width: none;
+        height: 100%;
+        margin: 0;
+    }
+    .modal-fullscreen-md-down .modal-content {
+        height: 100%;
+        border: 0;
+        border-radius: 0;
+    }
+    .modal-fullscreen-md-down .modal-header {
+        border-radius: 0;
+    }
+    .modal-fullscreen-md-down .modal-body {
+        overflow-y: auto;
+    }
+    .modal-fullscreen-md-down .modal-footer {
+        border-radius: 0;
+    }
+}
+@media (max-width: 991.98px) {
+    .modal-fullscreen-lg-down {
+        width: 100vw;
+        max-width: none;
+        height: 100%;
+        margin: 0;
+    }
+    .modal-fullscreen-lg-down .modal-content {
+        height: 100%;
+        border: 0;
+        border-radius: 0;
+    }
+    .modal-fullscreen-lg-down .modal-header {
+        border-radius: 0;
+    }
+    .modal-fullscreen-lg-down .modal-body {
+        overflow-y: auto;
+    }
+    .modal-fullscreen-lg-down .modal-footer {
+        border-radius: 0;
+    }
+}
+@media (max-width: 1199.98px) {
+    .modal-fullscreen-xl-down {
+        width: 100vw;
+        max-width: none;
+        height: 100%;
+        margin: 0;
+    }
+    .modal-fullscreen-xl-down .modal-content {
+        height: 100%;
+        border: 0;
+        border-radius: 0;
+    }
+    .modal-fullscreen-xl-down .modal-header {
+        border-radius: 0;
+    }
+    .modal-fullscreen-xl-down .modal-body {
+        overflow-y: auto;
+    }
+    .modal-fullscreen-xl-down .modal-footer {
+        border-radius: 0;
+    }
+}
+@media (max-width: 1399.98px) {
+    .modal-fullscreen-xxl-down {
+        width: 100vw;
+        max-width: none;
+        height: 100%;
+        margin: 0;
+    }
+    .modal-fullscreen-xxl-down .modal-content {
+        height: 100%;
+        border: 0;
+        border-radius: 0;
+    }
+    .modal-fullscreen-xxl-down .modal-header {
+        border-radius: 0;
+    }
+    .modal-fullscreen-xxl-down .modal-body {
+        overflow-y: auto;
+    }
+    .modal-fullscreen-xxl-down .modal-footer {
+        border-radius: 0;
+    }
+}
diff --git a/index.html b/index.html
index 765b954..c85e72f 100644
--- a/index.html
+++ b/index.html
@@ -140,7 +140,7 @@
             aria-labelledby="Credits window"
             aria-hidden="true"
         >
-            <div class="modal-dialog" role="document">
+            <div class="modal-dialog modal-fullscreen-md-down" role="document">
                 <div class="modal-content">
                     <div class="modal-header">
                         <h4 class="modal-title" data-i18n="credits.title">Credits</h4>
@@ -194,7 +194,7 @@
             aria-labelledby="Layers window"
             aria-hidden="true"
         >
-            <div class="modal-dialog modal-lg" role="document">
+            <div class="modal-dialog modal-lg modal-fullscreen-md-down" role="document">
                 <div class="modal-content">
                     <div class="modal-header">
                         <h4 class="modal-title" data-i18n="layers.customize">Customize layers</h4>
@@ -261,7 +261,7 @@
             aria-labelledby="About window"
             aria-hidden="true"
         >
-            <div class="modal-dialog" role="document">
+            <div class="modal-dialog modal-fullscreen-md-down" role="document">
                 <div class="modal-content">
                     <div class="modal-header">
                         <h4 class="modal-title" data-i18n="about.title">About</h4>
@@ -368,7 +368,7 @@
             aria-labelledby="What's new window"
             aria-hidden="true"
         >
-            <div class="modal-dialog modal-lg" role="document">
+            <div class="modal-dialog modal-lg modal-fullscreen-md-down" role="document">
                 <div class="modal-content">
                     <div class="modal-header">
                         <h4 class="modal-title" data-i18n="whatsnew.title">What's new?</h4>
@@ -397,7 +397,7 @@
             aria-labelledby="Load nogos window"
             aria-hidden="true"
         >
-            <div class="modal-dialog" role="document">
+            <div class="modal-dialog modal-fullscreen-md-down" role="document">
                 <div class="modal-content">
                     <div class="modal-header">
                         <h4 class="modal-title" data-i18n="loadNogos.title">Load no-go areas</h4>
@@ -474,7 +474,7 @@
             aria-labelledby="Export route window"
             aria-hidden="true"
         >
-            <div class="modal-dialog" role="document">
+            <div class="modal-dialog modal-fullscreen-md-down" role="document">
                 <div class="modal-content">
                     <div class="modal-header">
                         <h4 class="modal-title" data-i18n="export.title">Export route</h4>
@@ -598,7 +598,7 @@
             aria-labelledby="Load Track as route"
             aria-hidden="true"
         >
-            <div class="modal-dialog" role="document">
+            <div class="modal-dialog modal-fullscreen-md-down" role="document">
                 <div class="modal-content">
                     <div class="modal-header">
                         <h4 class="modal-title" data-i18n="trackasroute.title">Load Track as Route</h4>