diff --git a/sass/_header.scss b/sass/_header.scss index 07efa5f..fe725c6 100644 --- a/sass/_header.scss +++ b/sass/_header.scss @@ -11,7 +11,11 @@ .site-header__container { display: flex; align-items: center; - padding: .2em 2em; + padding: .2em 2em; + + @include tablet { + padding: .2em 1em; + } .site-header__mobile-menu { @include desktop { diff --git a/sass/_search.scss b/sass/_search.scss index d62dcf1..99e91f8 100644 --- a/sass/_search.scss +++ b/sass/_search.scss @@ -1,12 +1,17 @@ .site-header__search { #search { - background-image: url("data:image/svg+xml; utf8, "); - background-repeat: no-repeat; - border-color: transparent; - border-radius: 2px; - padding-top: 5px; - padding-bottom: 5px; - padding-left: 40px; + border-color: transparent; + border-radius: 2px; + padding-top: 5px; + padding-bottom: 5px; + margin-left: 10px; + + // Hide "s" icon on small screens to avoid search-box overflow + @media (min-width: 400px) { + background-image: url("data:image/svg+xml; utf8, "); + background-repeat: no-repeat; + padding-left: 40px; + } } li.selected, li:hover {