From a35ec30a9175ad13ba96ddef01843cdd508c92fa Mon Sep 17 00:00:00 2001
From: Luis <luissevillanopires@gmail.com>
Date: Sun, 18 Jun 2017 11:35:14 +0200
Subject: [PATCH] mobile slider css

---
 docs/colonizacion-leaflet/index.html | 27 +++++++++++++++++++++++++--
 1 file changed, 25 insertions(+), 2 deletions(-)

diff --git a/docs/colonizacion-leaflet/index.html b/docs/colonizacion-leaflet/index.html
index c0d3daa..cd59c3b 100644
--- a/docs/colonizacion-leaflet/index.html
+++ b/docs/colonizacion-leaflet/index.html
@@ -48,6 +48,29 @@
 	#slider span {
 		height: 2.2em;
 	}
+	@media (max-width: 590px){
+		#slider-container,
+		#slider,
+		.value {
+			display: block;
+		}
+		#slider-container {
+			position: static;
+			left: 0;
+			bottom: 0;
+			width: 100%;
+		}
+		.value {
+			padding: 6px 8px;
+			bottom: auto;
+			position: static;
+		}
+
+		#slider {
+			width: 90%;
+		}
+
+}
 	</style>
 
 	<style>
@@ -82,10 +105,10 @@
 
 	var grayscale   = L.tileLayer(mbUrl, {id: 'mapbox.light', attribution: mbAttr}),
 	streets  = L.tileLayer(mbUrl, {id: 'mapbox.satellite', attribution: mbAttr});
-
+	var desktop = window.innerWidth > 768;
 	var mymap = L.map('map', {
 		center:[40.4168, -3.7038],
-		zoom: 6,
+		zoom: desktop ? 6 : 5,
 		scrollWheelZoom: false,
 		dragging: false,
 		layers: [grayscale]