From e0a786ba60fdc9f6d70d63c341a0615de3e8fdf4 Mon Sep 17 00:00:00 2001
From: Norbert Renner <norbert.renner@gmx.de>
Date: Thu, 5 Apr 2018 11:37:15 +0200
Subject: [PATCH] Fix error message position, center horizontally (#56, #114)

---
 css/style.css | 11 +++++++----
 index.html    |  6 +++---
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/css/style.css b/css/style.css
index 1f9d451..59f311c 100644
--- a/css/style.css
+++ b/css/style.css
@@ -104,12 +104,15 @@ footer {
     cursor: crosshair;
 }
 
+#map {
+    /* center error message horizontally */
+    display: flex;
+    justify-content: center;
+}
 #message {
-    position: absolute;
-    left: 446px; /* 400 + 10 + 26 + 10 */
-    top: 0px;
-    margin-top: 10px;
+    margin: 10px 46px; /* 10 + 26 + 10 */
     z-index: 3000;
+    font-size: 1rem;
 }
 
 #profile_buttons {
diff --git a/index.html b/index.html
index aacc613..fff53f9 100644
--- a/index.html
+++ b/index.html
@@ -177,7 +177,9 @@
         </div>
         
         <div class="leaflet-sidebar-flex-row flexgrow">
-            <div id="map" class="leaflet-sidebar-map"></div>
+            <div id="map" class="leaflet-sidebar-map">
+                <div id="message"></div>
+            </div>
 
             <div id="sidebar" class="leaflet-sidebar collapsed">
 
@@ -218,8 +220,6 @@
                 </div>
             </div>
         </div>
-
-        <div id="message"></div>
     </div>
 
     <div class="collapse" id="elevation-chart"></div>