diff --git a/public/static/css/mapguesser.css b/public/static/css/mapguesser.css index b4b3c0e..56b0f59 100644 --- a/public/static/css/mapguesser.css +++ b/public/static/css/mapguesser.css @@ -47,7 +47,6 @@ p { img { display: block; - max-width: 100%; } .mono { @@ -136,7 +135,7 @@ div.header { color: white; } -div.header > div.grid { +div.header>div.grid { display: grid; grid-template-columns: auto auto; } @@ -163,7 +162,7 @@ div.mapContainer { } div.mapItem { - width: 375px; + width: 350px; background-color: #eeeeee; border-radius: 3px; margin: 10px auto; @@ -182,6 +181,10 @@ div.mapItem>div.title>p.title { font-size: 18px; } +div.mapItem>img { + width: 100%; +} + div.mapItem>div.inner { padding: 8px; } @@ -306,30 +309,36 @@ div.mapItem>div.inner>div.info>p:nth-child(2) { display: none; } -@media screen and (min-width: 1600px) { +@media screen and (min-width: 1504px) { div.mapContainer { grid-template-columns: auto auto auto auto; } } -@media screen and (min-width: 1200px) and (max-width: 1599px) { +@media screen and (min-width: 1134px) and (max-width: 1503px) { div.mapContainer { grid-template-columns: auto auto auto; } } -@media screen and (min-width: 800px) and (max-width: 1199px) { +@media screen and (min-width: 764px) and (max-width: 1133px) { div.mapContainer { grid-template-columns: auto auto; } } -@media screen and (max-width: 799px) { +@media screen and (max-width: 763px) { div.mapContainer { grid-template-columns: auto; } } +@media screen and (max-width: 374px) { + div.mapItem { + width: initial; + } +} + @media screen and (max-width: 599px) { div.header.small h1 span { display: none; diff --git a/views/maps.php b/views/maps.php index 074420e..4aaf4a9 100644 --- a/views/maps.php +++ b/views/maps.php @@ -25,7 +25,7 @@

- +