From 8625b2438513b02789d30df64b23a238155f244a Mon Sep 17 00:00:00 2001
From: Rumperuu <me+git@bengoldsworthy.net>
Date: Wed, 19 Oct 2022 14:18:14 -0700
Subject: [PATCH] Fix media queries

---
 public/css/app.css | 52 ++++++++++++++++++++++++++++------------------
 1 file changed, 32 insertions(+), 20 deletions(-)

diff --git a/public/css/app.css b/public/css/app.css
index 34db716..8e690b2 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -10,9 +10,6 @@ body {
 .page-title {
     font-size: 3em;
     text-align: center;
-    @media screen and (min-width: 1024px) {
-        text-align: left;
-    }
 }
 
 details h2 {
@@ -73,33 +70,20 @@ details h2 {
 #routeContainer {
     display: grid;
     grid-gap: 20px;
-    @media screen and (min-width: 1024px) {
-        grid-template-columns: 3fr 1fr;
-    }
 }
 
 #mapContainer {
     grid-column-start: 1;
     grid-column-end: 3;
-    @media screen and (min-width: 1024px) {
-        grid-column-end: 2;
-    }
 }
 
 #map { 
     height: 400px;
-    @media screen and (min-width: 1024px) {
-        height: auto;
-        min-height: 800px;
-    }
 }
 
 #checkinList {
     grid-column-start: 1;
     grid-column-end: 3;
-    @media screen and (min-width: 1024px) {
-        grid-column-start: 2;
-    }
 }
 
 details {
@@ -119,9 +103,6 @@ details[open] summary {
     max-width: 85vw;
     max-height: 85vh;
     min-width: 60vw;
-    @media screen and (min-width: 1024px) {
-        min-width: 350px;
-    }
 }
 
 .leaflet-popup-content {
@@ -132,7 +113,38 @@ details[open] summary {
     width: auto;
     height: auto;
     max-width: 70vw;
-    @media screen and (min-width: 1024px) {
+}
+
+/*
+ *  Large Display
+ */
+@media screen and (min-width: 1024px) {
+    .page-title {
+        text-align: left;
+    }
+    
+    #routeContainer {
+        grid-template-columns: 3fr 1fr;
+    }
+    
+    #mapContainer {
+        grid-column-end: 2;
+    }
+    
+    #map {
+        height: auto;
+        min-height: 800px;
+    }
+    
+    #checkinList {
+        grid-column-start: 2;
+    }
+    
+    .leaflet-popup {
+        min-width: 350px;
+    }
+    
+    .popup__image {
         max-width: 50vw;
     }
 }