Rumperuu/Where-in-the-World-is-Ben
1
0
Fork 0
Code Issues 2 Pull requests Projects Releases Wiki Activity

Fix media queries

Browse source
This commit is contained in:
Ben Goldsworthy 2022-10-19 14:18:14 -07:00
parent 27ace62423
commit 8625b24385
1 changed files with 32 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
public/css/app.css
View file

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