Fix error message position, center horizontally (#56, #114)

nrenner · Apr 5, 2018 · e0a786b · e0a786b
1 parent ed07a6c
commit e0a786b
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 7 deletions.
diff --git 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
@@ -177,7 +177,9 @@ <h4 class="modal-title">About</h4>
         </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 @@ <h1 class="leaflet-sidebar-header">Itinerary<span class="leaflet-sidebar-close">
                 </div>
             </div>
         </div>
-
-        <div id="message"></div>
     </div>
 
     <div class="collapse" id="elevation-chart"></div>