diff --git a/src/components/SearchInput/SearchInput.css b/src/components/SearchInput/SearchInput.css index ba8f981..e5d41e4 100644 --- a/src/components/SearchInput/SearchInput.css +++ b/src/components/SearchInput/SearchInput.css @@ -45,5 +45,19 @@ .wait-icon { cursor: wait; - /* opacity: 0.5; */ +} + +@media screen and (max-width: 558px) { + .search-bar svg { + display: none; + } + + .search-bar input { + margin-left: 0; + width: 60%; + } + + .wait-icon { + display: none; + } } diff --git a/src/components/SizeInput/SizeInput.css b/src/components/SizeInput/SizeInput.css index d47e2a5..1f156fd 100644 --- a/src/components/SizeInput/SizeInput.css +++ b/src/components/SizeInput/SizeInput.css @@ -27,6 +27,12 @@ outline: none; /* Remove outline */ } +@media screen and (max-width: 558px) { + .size-bar input { + margin: 0 auto; + } +} + .size-bar input::-webkit-slider-thumb { -webkit-appearance: none; /* Override default look */ appearance: none; diff --git a/src/components/Toolbar/Toolbar.css b/src/components/Toolbar/Toolbar.css index b115718..83450b7 100644 --- a/src/components/Toolbar/Toolbar.css +++ b/src/components/Toolbar/Toolbar.css @@ -24,3 +24,11 @@ menu.toolbar { .toolbar-contents > * { margin: 8px 4px 0; } + +@media screen and (max-width: 558px) { + .toolbar-contents { + width: 100%; + display: grid; + grid-template-columns: 50% 50%; + } +}