diff options
| author | Sam Walker <sw15612@my.bristol.ac.uk> | 2018-05-11 11:39:58 +0100 |
|---|---|---|
| committer | rubenwardy <rw@rubenwardy.com> | 2018-05-11 12:58:46 +0100 |
| commit | 7aec5368d887974b74d87e215e39da48fc971f65 (patch) | |
| tree | d8cf177137c6c0fc051905fb4aad08a1236c299c | |
| parent | 5e44f3d64c2be1b890e393832efd9fb100adf2c0 (diff) | |
| download | cheatdb-7aec5368d887974b74d87e215e39da48fc971f65.tar.xz | |
Use flexbox for responsive package grid
| -rw-r--r-- | app/scss/packagegrid.scss | 26 | ||||
| -rw-r--r-- | app/scss/page.scss | 4 |
2 files changed, 18 insertions, 12 deletions
diff --git a/app/scss/packagegrid.scss b/app/scss/packagegrid.scss index dfdc009..f1de7c8 100644 --- a/app/scss/packagegrid.scss +++ b/app/scss/packagegrid.scss @@ -1,26 +1,32 @@ .packagegrid { - list-style: none; + display: flex; + flex-wrap: wrap; + flex-direction: row; + flex-grow: 1; + flex-shrink: 1; + padding: 0; margin: 0; } .packagegrid li { - list-style: none; - display: inline-block; - padding: 0; - margin: 8px; + flex: 1; + display: block; + min-width: 246px; + min-height: 164px; + padding: 1; + margin: 5px; } .packagegrid a { display: block; - width: 246px; - height: 164px; + padding-bottom: 66.66%; border-radius: 7px; position: relative; overflow: hidden; - background-size: cover; - background-repeat: no-repeat; - background-position: center; + background-size: cover; + background-repeat: no-repeat; + background-position: center; } diff --git a/app/scss/page.scss b/app/scss/page.scss index 2aede6f..c816b66 100644 --- a/app/scss/page.scss +++ b/app/scss/page.scss @@ -6,7 +6,7 @@ html, body { margin: 0; } -nav, main, #alerts { +nav, main, #alerts { width: 90%; max-width: 960px; margin: auto; @@ -57,7 +57,7 @@ nav a:hover { header { padding: 20px; - background: #113; + background: #2988a4; } header p { |