diff options
| -rw-r--r-- | uploader/static/css/styles.css | 35 |
1 files changed, 26 insertions, 9 deletions
diff --git a/uploader/static/css/styles.css b/uploader/static/css/styles.css index 80c5a56..826ac41 100644 --- a/uploader/static/css/styles.css +++ b/uploader/static/css/styles.css @@ -5,7 +5,7 @@ body { margin: 0.7em; display: grid; - grid-template-columns: 1fr 9fr; + grid-template-columns: 2fr 8fr; grid-gap: 20px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; @@ -100,15 +100,32 @@ body { padding-left: 0.5em; } -#main #all-content { - /* Place it in the parent element */ - grid-column-start: 1; - grid-column-end: 3; +@media screen and (max-width: 20in) { + #main #all-content { + /* Place it in the parent element */ + grid-column-start: 1; + grid-column-end: 3; - /* Define layout for the children elements */ - display: grid; - grid-template-columns: 7fr 3fr; /* For a maximum screen width of 1366 pixels */ - grid-gap: 1.5em; + /* Define layout for the children elements */ + max-width: 80%; + } + + #sidebar-content { + display: none; + } +} + +@media screen and (min-width: 20.1in) { + #main #all-content { + /* Place it in the parent element */ + grid-column-start: 1; + grid-column-end: 3; + + /* Define layout for the children elements */ + display: grid; + grid-template-columns: 7fr 3fr; + grid-gap: 1.5em; + } } #main #all-content .row { |