diff --git a/modules/search/instant-search/components/search-result-product.scss b/modules/search/instant-search/components/search-result-product.scss index 5e407c0301066..8e1dd033262e9 100644 --- a/modules/search/instant-search/components/search-result-product.scss +++ b/modules/search/instant-search/components/search-result-product.scss @@ -2,19 +2,28 @@ display: flex; flex-wrap: wrap; padding: 0; - margin-top: 1em; } .jetpack-instant-search__search-result-product { - flex: 0 1 calc( 25% - 1em ); - margin-bottom: 1em; - border: 1px solid #eee; - margin-right: 1em; - min-width: 200px; - padding: 0 1em 1em 1em; + margin: 0 $grid-size-large $grid-size-large 0; + display: flex; + flex-direction: column; + position: relative; + + // On mobile and responsive viewports, we allow only a single column. + width: calc( 100% - #{$grid-size-large} ); + + &:last-child { + margin-right: 0; + } + + @include break-small { + // More columns on wider viewports + width: calc( ( 100% - ( #{$grid-size-large} * 6 ) ) / 3 ); + margin-right: 32px; + } } .jetpack-instant-search__search-result-product-img { - margin-top: 0.5em; - margin-bottom: 0.5em; + margin: 0.5em 0.5em 0.5em 0; } diff --git a/modules/search/instant-search/instant-search.scss b/modules/search/instant-search/instant-search.scss index 55c15c425ef73..9e53d9a2d7e4b 100644 --- a/modules/search/instant-search/instant-search.scss +++ b/modules/search/instant-search/instant-search.scss @@ -1,3 +1,11 @@ +$break-small: 600px; +$grid-size-large: 16px; + +@mixin break-small() { + @media ( min-width: #{ ( $break-small ) } ) { + @content; + } +} @import './components/gridicon/style.scss'; @import './components/search-results.scss'; @import './components/search-filters.scss'; @@ -9,3 +17,5 @@ .jetpack-instant-search__is-loading { opacity: 0.2; } + +