From: Paul Hänsch Date: Wed, 18 Jul 2018 23:17:41 +0000 (+0200) Subject: media queries X-Git-Url: https://git.plutz.net/?a=commitdiff_plain;h=e5fa77f840c59f5ff4b146f687a0d7b38e2d77f6;p=serve0 media queries --- diff --git a/style.css b/style.css index 4849e34..8de1b34 100644 --- a/style.css +++ b/style.css @@ -193,14 +193,38 @@ a[href="#advsearch"]:before { #advsearch input.and:checked + label + .select { display: inline-block; position: relative; - width: 19%; + width: 100%; margin: 0 .5% 1em .5%; - min-width: 200px; min-height: 12em; overflow: hidden; vertical-align: top; } +@media (min-width: 460px){ +#advsearch .submit, +#advsearch input.and + label + .select:first-of-type, +#advsearch input.and:checked + label + .select { + width: 49%; min-width: 200px; +} } +@media (min-width: 660px){ +#advsearch .submit, +#advsearch input.and + label + .select:first-of-type, +#advsearch input.and:checked + label + .select { + width: 32%; +} } +@media (min-width: 860px){ +#advsearch .submit, +#advsearch input.and + label + .select:first-of-type, +#advsearch input.and:checked + label + .select { + width: 24%; +} } +@media (min-width: 1060px){ +#advsearch .submit, +#advsearch input.and + label + .select:first-of-type, +#advsearch input.and:checked + label + .select { + width: 19%; +} } + #advsearch .submit { min-height: 0; } #advsearch .submit * { width: 50%; } @@ -243,13 +267,13 @@ a[href="#advsearch"]:before { .list { position: relative; display: inline-block; - width: 25%; min-width: 250px; + width: 100%; padding: .375em; vertical-align: top; overflow: hidden; } -.list.dir { padding: .5em 1em; } +.list.dir { padding: .5em 1em; } .list:before { position: absolute; top: .25em; left: .25em; @@ -327,10 +351,15 @@ a[href="#advsearch"]:before { #multitag fieldset{ display: inline-block; - width: 25%; min-width: 250px; + width: 100%; vertical-align: top; padding: 0 .25em; border: none; } + +@media (min-width: 520px) { .list, #multitag fieldset { width: 50%; min-width: 250px; } } +@media (min-width: 760px) { .list, #multitag fieldset { width: 33%; } } +@media (min-width: 1020px){ .list, #multitag fieldset { width: 25%; } } + #multitag fieldset * { width: 100%; } #multitag fieldset button { width: 50%; }