From 59c783224d0a5e78dc9f2d91e515d214ed880d1c Mon Sep 17 00:00:00 2001 From: Stephen Beattie Date: Fri, 3 Jan 2025 14:30:10 +1100 Subject: [PATCH 1/9] Attempt exercise 1 --- src/components/Header/Header.jsx | 111 ++++++++++++++++++++++++------- 1 file changed, 87 insertions(+), 24 deletions(-) diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx index c947d11..1f65a0b 100644 --- a/src/components/Header/Header.jsx +++ b/src/components/Header/Header.jsx @@ -2,39 +2,97 @@ import React from 'react'; import styled from 'styled-components'; import { Menu, Search, User } from 'react-feather'; -import { QUERIES } from '../../constants'; +import { COLORS, FAMILIES, QUERIES } from '../../constants'; import MaxWidthWrapper from '../MaxWidthWrapper'; import Logo from '../Logo'; import Button from '../Button'; const Header = () => { - return ( -
- - + return (<> + + + + + + + + + + + + + + + + + + - - - - - - - - - - - -
- ); + + + + + + Subscribe + Already a subscriber? + + + + ) }; +const SubscribeButtonWrapper = styled.div` + display: flex; + flex-direction: column; + align-items: center; +` + +const SubscribeButton = styled.button` + background-color: ${COLORS.primary};; + padding: 8px; + border-radius: 4px; + color: ${COLORS.white}; + text-transform: uppercase; + font-family: ${FAMILIES.sansSerif}; + font-weight: bold; + width: 100%; + text-align: center; +` + +const AlreadyMemberLink = styled.a` + font-family: ${FAMILIES.serif}; + font-style: italic; + color: ${COLORS.gray}; + padding-top: 4px; + text-decoration: underline; +` + +const DesktopHeader = styled.header` + display: none; + + @media ${QUERIES.laptopAndUp} { + display: revert; + + } +` + +const MobileHeader = styled.header` + @media ${QUERIES.laptopAndUp} { + display: none; + } +` + const SuperHeader = styled.div` padding: 16px 0; background: var(--color-gray-900); @@ -65,6 +123,11 @@ const MainHeader = styled(MaxWidthWrapper)` justify-content: center; margin-top: 32px; margin-bottom: 48px; + + @media ${QUERIES.laptopAndUp} { + justify-content: space-between; + + } `; export default Header; From d2a0e1f1872ed2b7cf13e9ccc72469373759b341 Mon Sep 17 00:00:00 2001 From: Stephen Beattie Date: Fri, 3 Jan 2025 15:58:18 +1100 Subject: [PATCH 2/9] Attempt exercise 2 --- src/components/Header/Header.jsx | 2 +- src/components/MainStory/MainStory.jsx | 10 +++++++ .../MainStoryGrid/MainStoryGrid.jsx | 3 +- src/components/OpinionStory/OpinionStory.jsx | 26 ++++++++++++++++ .../SecondaryStory/SecondaryStory.jsx | 30 ++++++++++++++----- 5 files changed, 62 insertions(+), 9 deletions(-) diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx index 1f65a0b..bf72e3a 100644 --- a/src/components/Header/Header.jsx +++ b/src/components/Header/Header.jsx @@ -75,7 +75,7 @@ const AlreadyMemberLink = styled.a` font-style: italic; color: ${COLORS.gray}; padding-top: 4px; - text-decoration: underline; + text-decoration: ` const DesktopHeader = styled.header` diff --git a/src/components/MainStory/MainStory.jsx b/src/components/MainStory/MainStory.jsx index b67f92a..5bac902 100644 --- a/src/components/MainStory/MainStory.jsx +++ b/src/components/MainStory/MainStory.jsx @@ -1,5 +1,6 @@ import React from 'react'; import styled from 'styled-components'; +import { QUERIES } from '../../constants'; const MainStory = ({ id, @@ -44,6 +45,15 @@ const Abstract = styled.p` font-size: 1rem; margin-bottom: 1em; white-space: pre-wrap; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 8; + overflow: hidden; + + @media (${QUERIES.tabletAndUp}) { + -webkit-line-clamp: 16; + overflow: hidden; + } `; const Location = styled.span` diff --git a/src/components/MainStoryGrid/MainStoryGrid.jsx b/src/components/MainStoryGrid/MainStoryGrid.jsx index 478c2e5..fdd7271 100644 --- a/src/components/MainStoryGrid/MainStoryGrid.jsx +++ b/src/components/MainStoryGrid/MainStoryGrid.jsx @@ -12,6 +12,7 @@ import MainStory from '../MainStory'; import SecondaryStory from '../SecondaryStory'; import OpinionStory from '../OpinionStory'; import Advertisement from '../Advertisement'; +import { COLORS } from '../../constants'; const MainStoryGrid = () => { return ( @@ -23,7 +24,7 @@ const MainStoryGrid = () => { {SECONDARY_STORIES.map((story, index) => ( - + ))} diff --git a/src/components/OpinionStory/OpinionStory.jsx b/src/components/OpinionStory/OpinionStory.jsx index 75c00c6..8e22829 100644 --- a/src/components/OpinionStory/OpinionStory.jsx +++ b/src/components/OpinionStory/OpinionStory.jsx @@ -1,8 +1,10 @@ import React from 'react'; import styled from 'styled-components'; +import { COLORS, QUERIES } from '../../constants'; const OpinionStory = ({ id, title, author, avatar }) => { return ( + <> @@ -12,11 +14,31 @@ const OpinionStory = ({ id, title, author, avatar }) => { + + ); }; +const Divider = styled.hr` + color: ${COLORS.gray['300']}; + size: 1px; + width: 100%; + margin: 16px 0px; + padding-left: 32px; + + &:last-of-type { + display: none; + } +` + const Wrapper = styled.article` color: var(--color-gray-900); + + @media not (${QUERIES.tabletOnly}) { + display: flex; + flex-direction: row-reverse; + justify-content: space-between; + } `; const Avatar = styled.img` @@ -25,6 +47,10 @@ const Avatar = styled.img` height: 48px; border-radius: 50%; object-fit: cover; + + @media ${QUERIES.laptopAndUp} { + display: revert; + } `; const AuthorName = styled.p` diff --git a/src/components/SecondaryStory/SecondaryStory.jsx b/src/components/SecondaryStory/SecondaryStory.jsx index 640bb7d..5462396 100644 --- a/src/components/SecondaryStory/SecondaryStory.jsx +++ b/src/components/SecondaryStory/SecondaryStory.jsx @@ -1,18 +1,34 @@ import React from 'react'; import styled from 'styled-components'; +import { COLORS } from '../../constants'; const SecondaryStory = ({ id, title, image, location, abstract }) => { return ( - - - {image.alt} - {title} - {abstract} - - + <> + + + {image.alt} + {title} + {abstract} + + + + ); }; + +const Divider = styled.hr` + color: ${COLORS.gray[300]}; + size: 1px; + width: 100%; + margin: 16px 0px; + + &:last-of-type { + display: none + } +` + const Wrapper = styled.article` display: grid; grid-template-areas: From fb656210cedefcdd07c59e4d7c8d07d3356a67b0 Mon Sep 17 00:00:00 2001 From: Stephen Beattie Date: Fri, 3 Jan 2025 20:01:09 +1100 Subject: [PATCH 3/9] Set up tablet grid --- src/components/MainStoryGrid/MainStoryGrid.jsx | 11 ++++++++++- src/components/SecondaryStory/SecondaryStory.jsx | 11 ++++++++++- 2 files changed, 20 insertions(+), 2 deletions(-) diff --git a/src/components/MainStoryGrid/MainStoryGrid.jsx b/src/components/MainStoryGrid/MainStoryGrid.jsx index fdd7271..47d9688 100644 --- a/src/components/MainStoryGrid/MainStoryGrid.jsx +++ b/src/components/MainStoryGrid/MainStoryGrid.jsx @@ -12,7 +12,7 @@ import MainStory from '../MainStory'; import SecondaryStory from '../SecondaryStory'; import OpinionStory from '../OpinionStory'; import Advertisement from '../Advertisement'; -import { COLORS } from '../../constants'; +import { COLORS, QUERIES } from '../../constants'; const MainStoryGrid = () => { return ( @@ -47,6 +47,7 @@ const MainStoryGrid = () => { const Wrapper = styled.div` display: grid; + grid-template-columns: 1fr; grid-template-areas: 'main-story' 'secondary-stories' @@ -54,6 +55,14 @@ const Wrapper = styled.div` 'advertisement'; gap: 48px; margin-bottom: 48px; + + @media ${QUERIES.tabletAndUp} { + grid-template-columns: 2fr 1fr; + grid-template-areas: + 'main-story secondary-stories' + 'advertisement advertisement' + 'opinion-stories opinion-stories'; + } `; const MainStorySection = styled.section` diff --git a/src/components/SecondaryStory/SecondaryStory.jsx b/src/components/SecondaryStory/SecondaryStory.jsx index 5462396..64aa263 100644 --- a/src/components/SecondaryStory/SecondaryStory.jsx +++ b/src/components/SecondaryStory/SecondaryStory.jsx @@ -1,6 +1,6 @@ import React from 'react'; import styled from 'styled-components'; -import { COLORS } from '../../constants'; +import { COLORS, QUERIES } from '../../constants'; const SecondaryStory = ({ id, title, image, location, abstract }) => { return ( @@ -37,6 +37,11 @@ const Wrapper = styled.article` gap: 4px 16px; grid-template-columns: 120px 1fr; color: var(--color-gray-900); + + @media ${QUERIES.tabletOnly} { + display: flex; + flex-direction: column; + } `; const Image = styled.img` @@ -61,6 +66,10 @@ const Abstract = styled.p` grid-area: abstract; font-size: 1rem; white-space: pre-wrap; + + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 3; `; export default SecondaryStory; From 2af2bc04fc04d28b1de1f396ce4a3b671c5223f2 Mon Sep 17 00:00:00 2001 From: Stephen Beattie Date: Fri, 3 Jan 2025 20:09:11 +1100 Subject: [PATCH 4/9] Make opinion row work for tablet --- src/components/MainStoryGrid/MainStoryGrid.jsx | 4 ++++ src/components/OpinionStory/OpinionStory.jsx | 5 +++++ 2 files changed, 9 insertions(+) diff --git a/src/components/MainStoryGrid/MainStoryGrid.jsx b/src/components/MainStoryGrid/MainStoryGrid.jsx index 47d9688..5042710 100644 --- a/src/components/MainStoryGrid/MainStoryGrid.jsx +++ b/src/components/MainStoryGrid/MainStoryGrid.jsx @@ -76,6 +76,10 @@ const SecondaryStorySection = styled.section` const StoryList = styled.div` display: flex; flex-direction: column; + + @media ${QUERIES.tabletOnly} { + flex-direction: row; + } `; const OpinionSection = styled.section` diff --git a/src/components/OpinionStory/OpinionStory.jsx b/src/components/OpinionStory/OpinionStory.jsx index 8e22829..35a3e4a 100644 --- a/src/components/OpinionStory/OpinionStory.jsx +++ b/src/components/OpinionStory/OpinionStory.jsx @@ -29,11 +29,16 @@ const Divider = styled.hr` &:last-of-type { display: none; } + + @media ${QUERIES.tabletOnly} { + display: none; + } ` const Wrapper = styled.article` color: var(--color-gray-900); + margin: 0 16px; @media not (${QUERIES.tabletOnly}) { display: flex; flex-direction: row-reverse; From 5d6cc2a466345f4a93e2424c0ac3f79e2a7b623c Mon Sep 17 00:00:00 2001 From: Stephen Beattie Date: Sun, 5 Jan 2025 13:00:38 +1100 Subject: [PATCH 5/9] Attempt exercise 3 - gave up on getting dividers completely correct after quite a bit of time on it. --- .../MainStoryGrid/MainStoryGrid.jsx | 31 ++++++++++++++++--- src/components/OpinionStory/OpinionStory.jsx | 4 +-- .../SecondaryStory/SecondaryStory.jsx | 4 ++- 3 files changed, 31 insertions(+), 8 deletions(-) diff --git a/src/components/MainStoryGrid/MainStoryGrid.jsx b/src/components/MainStoryGrid/MainStoryGrid.jsx index 5042710..b8437c2 100644 --- a/src/components/MainStoryGrid/MainStoryGrid.jsx +++ b/src/components/MainStoryGrid/MainStoryGrid.jsx @@ -53,7 +53,7 @@ const Wrapper = styled.div` 'secondary-stories' 'opinion-stories' 'advertisement'; - gap: 48px; + gap: 16px; margin-bottom: 48px; @media ${QUERIES.tabletAndUp} { @@ -63,6 +63,13 @@ const Wrapper = styled.div` 'advertisement advertisement' 'opinion-stories opinion-stories'; } + + @media ${QUERIES.laptopAndUp} { + grid-template-columns: 3fr 2fr 2fr; + grid-template-areas: + 'main-story secondary-stories opinion-stories' + 'main-story advertisement advertisement' + } `; const MainStorySection = styled.section` @@ -71,23 +78,37 @@ const MainStorySection = styled.section` const SecondaryStorySection = styled.section` grid-area: secondary-stories; + + @media ${QUERIES.tabletAndUp} { + border-left: 1px solid ${COLORS.gray[300]}; + padding-left: 24px; + margin-left: 24px; + } `; const StoryList = styled.div` display: flex; flex-direction: column; - - @media ${QUERIES.tabletOnly} { - flex-direction: row; - } `; const OpinionSection = styled.section` grid-area: opinion-stories; + + @media ${QUERIES.laptopAndUp} { + border-left: 1px solid ${COLORS.gray[300]}; + padding-left: 24px; + margin-left: 24px; + } `; const AdvertisementSection = styled.section` grid-area: advertisement; + + @media ${QUERIES.laptopAndUp} { + border-top: 1px solid ${COLORS.gray[300]}; + padding-left: 24px; + margin-left: 24px; + } `; export default MainStoryGrid; diff --git a/src/components/OpinionStory/OpinionStory.jsx b/src/components/OpinionStory/OpinionStory.jsx index 35a3e4a..c064437 100644 --- a/src/components/OpinionStory/OpinionStory.jsx +++ b/src/components/OpinionStory/OpinionStory.jsx @@ -20,11 +20,12 @@ const OpinionStory = ({ id, title, author, avatar }) => { }; const Divider = styled.hr` - color: ${COLORS.gray['300']}; size: 1px; width: 100%; margin: 16px 0px; padding-left: 32px; + border: none; + border-top: 1px solid ${COLORS.gray[300]}; &:last-of-type { display: none; @@ -38,7 +39,6 @@ const Divider = styled.hr` const Wrapper = styled.article` color: var(--color-gray-900); - margin: 0 16px; @media not (${QUERIES.tabletOnly}) { display: flex; flex-direction: row-reverse; diff --git a/src/components/SecondaryStory/SecondaryStory.jsx b/src/components/SecondaryStory/SecondaryStory.jsx index 64aa263..f48a363 100644 --- a/src/components/SecondaryStory/SecondaryStory.jsx +++ b/src/components/SecondaryStory/SecondaryStory.jsx @@ -23,7 +23,9 @@ const Divider = styled.hr` size: 1px; width: 100%; margin: 16px 0px; - + border: none; + border-top: 1px solid ${COLORS.gray[300]}; + &:last-of-type { display: none } From 6678cc2d16a70789a9b16c857bd5687bbad5d909 Mon Sep 17 00:00:00 2001 From: Stephen Beattie Date: Sun, 5 Jan 2025 13:51:33 +1100 Subject: [PATCH 6/9] Exercise 4 but couldn't get overflow to work --- .../MainStoryGrid/MainStoryGrid.jsx | 4 ++ .../SpecialtyStoryGrid/SpecialtyStoryGrid.jsx | 60 +++++++++++++++++-- 2 files changed, 58 insertions(+), 6 deletions(-) diff --git a/src/components/MainStoryGrid/MainStoryGrid.jsx b/src/components/MainStoryGrid/MainStoryGrid.jsx index b8437c2..dc4f819 100644 --- a/src/components/MainStoryGrid/MainStoryGrid.jsx +++ b/src/components/MainStoryGrid/MainStoryGrid.jsx @@ -89,6 +89,10 @@ const SecondaryStorySection = styled.section` const StoryList = styled.div` display: flex; flex-direction: column; + + @media ${QUERIES.tabletOnly} { + flex-direction: row; + } `; const OpinionSection = styled.section` diff --git a/src/components/SpecialtyStoryGrid/SpecialtyStoryGrid.jsx b/src/components/SpecialtyStoryGrid/SpecialtyStoryGrid.jsx index b13e627..a77e554 100644 --- a/src/components/SpecialtyStoryGrid/SpecialtyStoryGrid.jsx +++ b/src/components/SpecialtyStoryGrid/SpecialtyStoryGrid.jsx @@ -6,6 +6,7 @@ import { MARKET_DATA, SPORTS_STORIES } from '../../data'; import MarketCard from '../MarketCard'; import SectionTitle from '../SectionTitle'; import MiniStory from '../MiniStory'; +import { COLORS, QUERIES } from '../../constants'; const SpecialtyStoryGrid = () => { return ( @@ -45,16 +46,63 @@ const SpecialtyStoryGrid = () => { }; const Wrapper = styled.div` - display: grid; - gap: 48px; + display: grid; + + @media ${QUERIES.laptopAndUp} { + grid-template-columns: + repeat(auto-fill, minmax(220px, 1fr)) + ; + grid-template-columns: 1fr 1fr; + + & > *:nth-child(1) { + border-right: + 2px solid ${COLORS.gray[300]}; + padding-right: 24px; + } + + & > *:nth-child(2) { + padding-left: 24px; + } + } + } +`; + +const MarketsSection = styled.section` `; -const MarketsSection = styled.section``; +const MarketCards = styled.div` + display: grid; + gap: 16px; + grid-template-columns: + repeat(auto-fill, minmax(150px, 1fr)); +`; + +const SportsSection = styled.section` + margin-top: 32px; + + @media ${QUERIES.laptopAndUp} { + margin-top: -32px; + } +`; -const MarketCards = styled.div``; +const SportsStories = styled.div` + display: grid; + gap: 16px; + grid-template-columns: + repeat(auto-fill, minmax(138px, 1fr)); -const SportsSection = styled.section``; + @media ${QUERIES.tabletAndUp} { + grid-template-columns: + repeat(auto-fill, minmax(220px, 1fr)) + ; + } -const SportsStories = styled.div``; + @media ${QUERIES.laptopAndUp} { + grid-template-columns: + repeat(auto-fill, minmax(220px, 1fr)) + ; + grid-template-columns: 1fr 1fr; + } + `; export default SpecialtyStoryGrid; From 32f63a3e3f133049b311d089e9d94b4bac4ca92b Mon Sep 17 00:00:00 2001 From: Stephen Beattie Date: Sun, 5 Jan 2025 14:12:56 +1100 Subject: [PATCH 7/9] Attempt exercise 5 --- src/components/Footer/Footer.jsx | 34 ++++++++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/src/components/Footer/Footer.jsx b/src/components/Footer/Footer.jsx index 46a9c2f..6137a36 100644 --- a/src/components/Footer/Footer.jsx +++ b/src/components/Footer/Footer.jsx @@ -4,6 +4,7 @@ import styled from 'styled-components'; import MaxWidthWrapper from '../MaxWidthWrapper'; import VisuallyHidden from '../VisuallyHidden'; +import { QUERIES } from '../../constants'; const Footer = () => { return ( @@ -144,6 +145,16 @@ const TopRow = styled.div` font-size: 0.875rem; border-bottom: 1px solid var(--color-gray-700); padding: 24px 0; + + @media ${QUERIES.tabletAndUp} { + flex-direction: row; + justify-content:center; + } + + @media ${QUERIES.laptopAndUp} { + flex-direction: row; + justify-content:right; + } `; const Social = styled.div` @@ -157,6 +168,12 @@ const Social = styled.div` path { stroke-width: 1.5px; } + + @media ${QUERIES.tabletAndUp} { + padding-left: 32px; + flex-direction: row-reverse; + gap: 12px; + } `; const TopNavList = styled.ul` @@ -170,6 +187,19 @@ const MainNavArea = styled.div` gap: 32px; padding: 32px 0 48px; text-align: center; + + @media ${QUERIES.tabletAndUp} { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + text-align: left; + } + + @media ${QUERIES.laptopAndUp} { + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr; + text-align: left; + // justify-items: center; + } `; const MainNavHeading = styled.h2` @@ -196,6 +226,10 @@ const Subfooter = styled.div` display: flex; flex-direction: column; align-items: center; + + @media ${QUERIES.laptopAndUp} { + align-items: start; + } `; const Logo = styled.a` From a5fc230b5cc7a630661c5f91b04fd44df984a4e4 Mon Sep 17 00:00:00 2001 From: Stephen Beattie Date: Sun, 5 Jan 2025 15:23:30 +1100 Subject: [PATCH 8/9] Add missing text-decoration and ensure that the Opinion section being set to row doesn't also affect the Secondary stories --- src/components/Header/Header.jsx | 2 +- src/components/MainStoryGrid/MainStoryGrid.jsx | 12 +++++++++--- 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx index bf72e3a..1f65a0b 100644 --- a/src/components/Header/Header.jsx +++ b/src/components/Header/Header.jsx @@ -75,7 +75,7 @@ const AlreadyMemberLink = styled.a` font-style: italic; color: ${COLORS.gray}; padding-top: 4px; - text-decoration: + text-decoration: underline; ` const DesktopHeader = styled.header` diff --git a/src/components/MainStoryGrid/MainStoryGrid.jsx b/src/components/MainStoryGrid/MainStoryGrid.jsx index dc4f819..fed1476 100644 --- a/src/components/MainStoryGrid/MainStoryGrid.jsx +++ b/src/components/MainStoryGrid/MainStoryGrid.jsx @@ -90,9 +90,9 @@ const StoryList = styled.div` display: flex; flex-direction: column; - @media ${QUERIES.tabletOnly} { - flex-direction: row; - } + // @media ${QUERIES.tabletOnly} { + // flex-direction: row; + // } `; const OpinionSection = styled.section` @@ -103,6 +103,12 @@ const OpinionSection = styled.section` padding-left: 24px; margin-left: 24px; } + + @media ${QUERIES.tabletOnly} { + & > *:nth-child(2) { + flex-direction: row; + } + } `; const AdvertisementSection = styled.section` From 0e2c08f25e00a678798c10517d93c16d6f9a4a8f Mon Sep 17 00:00:00 2001 From: Stephen Beattie Date: Sun, 5 Jan 2025 16:56:54 +1100 Subject: [PATCH 9/9] Make overflow work on Sports section --- .../MainStoryGrid/MainStoryGrid.jsx | 1 + .../SpecialtyStoryGrid/SpecialtyStoryGrid.jsx | 27 +++++++++++++------ 2 files changed, 20 insertions(+), 8 deletions(-) diff --git a/src/components/MainStoryGrid/MainStoryGrid.jsx b/src/components/MainStoryGrid/MainStoryGrid.jsx index fed1476..a8f91fd 100644 --- a/src/components/MainStoryGrid/MainStoryGrid.jsx +++ b/src/components/MainStoryGrid/MainStoryGrid.jsx @@ -105,6 +105,7 @@ const OpinionSection = styled.section` } @media ${QUERIES.tabletOnly} { + flex: 1; & > *:nth-child(2) { flex-direction: row; } diff --git a/src/components/SpecialtyStoryGrid/SpecialtyStoryGrid.jsx b/src/components/SpecialtyStoryGrid/SpecialtyStoryGrid.jsx index a77e554..3c32f5c 100644 --- a/src/components/SpecialtyStoryGrid/SpecialtyStoryGrid.jsx +++ b/src/components/SpecialtyStoryGrid/SpecialtyStoryGrid.jsx @@ -37,7 +37,9 @@ const SpecialtyStoryGrid = () => { {SPORTS_STORIES.map((data) => ( - + + + ))} @@ -67,6 +69,10 @@ const Wrapper = styled.div` } `; +const SportsStoryWrapper = styled.div` + min-width: 220px; +` + const MarketsSection = styled.section` `; @@ -83,6 +89,13 @@ const SportsSection = styled.section` @media ${QUERIES.laptopAndUp} { margin-top: -32px; } + + @media ${QUERIES.tabletAndUp} { + display: flex; + flex-direction: column; + overflow: scroll; + grid-template-columns: revert; + } `; const SportsStories = styled.div` @@ -92,16 +105,14 @@ const SportsStories = styled.div` repeat(auto-fill, minmax(138px, 1fr)); @media ${QUERIES.tabletAndUp} { - grid-template-columns: - repeat(auto-fill, minmax(220px, 1fr)) - ; + display: flex; + overflow: scroll; + grid-template-columns: revert; } @media ${QUERIES.laptopAndUp} { - grid-template-columns: - repeat(auto-fill, minmax(220px, 1fr)) - ; - grid-template-columns: 1fr 1fr; + display: flex; + grid-template-columns:revert; } `;