diff --git a/static/search/search-box.css b/static/search/search-box.css index 4e14fb8..0f67205 100644 --- a/static/search/search-box.css +++ b/static/search/search-box.css @@ -1,9 +1,16 @@ :root { --selected-color: #def; + --search-bar-width: 12rem; +} + +@media screen and (max-width: 768px) { + :root { + --search-bar-width: 24rem; + } } #search-wrapper { - align-self: flex-end; + z-index: 1; } #search-wrapper .combobox-list { @@ -29,7 +36,7 @@ } #search-wrapper .combobox input { - width: 24rem; + width: var(--search-bar-width); outline: none; font-size: .9rem; padding: .3rem .5rem; @@ -46,7 +53,7 @@ padding: 0; position: absolute; top: calc(100%); - width: 24rem; + width: var(--search-bar-width); list-style: none; background-color: white; display: none;