diff --git a/styles.css b/styles.css index df67890..cc993d4 100644 --- a/styles.css +++ b/styles.css @@ -13,41 +13,40 @@ background-position: center; display: grid; - padding: 10px; height: 100%; width: 100%; + padding: 20px; overflow: scroll; - grid-template-columns: repeat(10, minmax(130px, 1fr)); - grid-template-rows: repeat(13, 1fr); + grid-template-columns: 300px 1fr 600px 1fr 300px; + grid-template-rows: repeat(6, 1fr); gap: 20px; } #photos-box { - grid-row: 1 / 14; - grid-column: 1 / 3; - + grid-row: 1 / 7; + grid-column: 1; justify-content: space-between; } #search-box { - grid-row: 2 / 4; - grid-column: 4 / 8; + grid-row: 2; + grid-column: 3; } #weather-box { - grid-row: 1 / 4; - grid-column: 9 / 11; + grid-row: 1 / 3; + grid-column: 5; } #custom-box { - grid-row: 4 / 10; - grid-column: 9 / 11; + grid-row: 3 / 5; + grid-column: 5; } #currency-box { - grid-row: 10 / 14; - grid-column: 9 / 11; + grid-row: 5 / 7; + grid-column: 5; } .box { @@ -102,7 +101,7 @@ .currency .select { padding: .6em 0; - width: 7ch; + width: 6em; } .currency .result {