CSS: Improve handling of small viewports.

2 files changed, 4 insertions, 5 deletions

diff --git a/main.js b/main.js
index 5298b1c..c98179f 100644
--- a/main.js
+++ b/main.js
@@ -208,7 +208,6 @@ const TRAILING_ZEROES = /\.?0*$/;
 if (window.location !== window.parent.location) {
   const div = document.createElement('div');
   menu.appendChild(div);
-  div.id = 'newtab-button';
   div.classList.add('ol-unselectable', 'ol-control');
 
   const btn = document.createElement('button');
diff --git a/style.css b/style.css
index 9a8002d..cce906c 100644
--- a/style.css
+++ b/style.css
@@ -114,7 +114,7 @@ html, body {
 #map-menu, #zoom-control {
   position: relative;
 }
-@media screen and (min-width: 577px) {
+@media screen and (min-width: 768px) {
   #map-menu > .ol-control > button {
     font-size: 200%;
   }
@@ -123,7 +123,7 @@ html, body {
   margin-top: .5rem;
   pointer-events: auto;
 }
-@media screen and (max-width: 576px) {
+@media screen and (max-width: 767px) {
   #map-menu > * {
     margin-top: .25rem;
   }
@@ -209,7 +209,7 @@ html, body {
   display: block;
 }
 
-@media screen and (max-width: 576px) {
+@media screen and (max-width: 767px) {
   #layer-selection-panel,
   #map-legend-panel {
     max-width: 100%;
@@ -237,7 +237,7 @@ html, body {
     display: none;
   }
 }
-@media screen and (max-width: 768px) {
+@media screen and (max-width: 900px) {
   #map-legend-panel, #layer-selection-panel {
     max-width: 60%;
   }