diff --git a/src/components/PackTile.js b/src/components/PackTile.js index 5d582f878..c35a2b17e 100644 --- a/src/components/PackTile.js +++ b/src/components/PackTile.js @@ -9,14 +9,10 @@ import { Tag, Link, } from '@newrelic/gatsby-theme-newrelic'; -import { - SHIELD_LEVELS, - RESERVED_QUICKSTART_IDS, - QUICKSTARTS_COLLAPSE_BREAKPOINT, -} from '../data/constants'; +import { SHIELD_LEVELS, RESERVED_QUICKSTART_IDS } from '../data/constants'; import PackImg from './PackImg'; -const IMAGE_BREAKPOINT = 1080; +const IMAGE_BREAKPOINT = '1080px'; const VIEWS = { GRID: 'Grid view', @@ -76,28 +72,33 @@ const PackTile = ({ interactive css={css` overflow: hidden; - //display: flex; - //flex-direction: column; display: grid; grid-template-rows: 1fr 3.5fr 0.5fr; + grid-template-columns: auto; + ${view === VIEWS.GRID && + css` + @media screen and (max-width: ${IMAGE_BREAKPOINT}) { + grid-template-rows: 4.5fr 0.5fr; + } + `} + ${view === VIEWS.LIST && css` - margin-bottom: 1em; - display: grid; grid-template-columns: 1fr 3.5fr 0.5fr; - @media (max-width: 1080px) { + grid-template-rows: auto; + @media screen and (max-width: ${IMAGE_BREAKPOINT}) { grid-template-columns: 4.5fr 0.5fr; + } `} - - @media screen and (max-width: ${QUICKSTARTS_COLLAPSE_BREAKPOINT}) { - flex-direction: row; - } `} onClick={() => handlePackClick(id)} >