From 54399a3c683ab55d2133c887a46f04c33d35de29 Mon Sep 17 00:00:00 2001 From: Tom Heaton Date: Wed, 19 Jun 2024 15:35:17 +0100 Subject: [PATCH] fix hero section on mobile --- src/components/HeroSection/HeroElements.jsx | 25 +++++++++++++++------ 1 file changed, 18 insertions(+), 7 deletions(-) diff --git a/src/components/HeroSection/HeroElements.jsx b/src/components/HeroSection/HeroElements.jsx index 2a3e7bd..383b648 100755 --- a/src/components/HeroSection/HeroElements.jsx +++ b/src/components/HeroSection/HeroElements.jsx @@ -61,12 +61,16 @@ export const HeroBtnWrapper = styled.div` export const HeroRow = styled.div` display: grid; - grid-auto-columns: minmax(auto, 1fr); + grid-template-columns: 1fr 1fr; + gap: 20px; align-items: top; - grid-template-areas: 'col1 col2' }; + grid-template-areas: "col1 col2"; - @media screen and (max-width: 768px){ - grid-template-areas: 'col2' 'col1'; + @media screen and (max-width: 768px) { + grid-template-columns: 1fr; + grid-template-areas: + "col1" + "col2"; } `; @@ -74,7 +78,6 @@ export const HeroNewsItem = styled.div` margin-left: 4px; color: #000000; font-size: 16px; - /* line-height: 16px; */ margin-bottom: 16px; display: flex; justify-content: start; @@ -111,12 +114,16 @@ export const HeroColumn1 = styled.div` margin-left: 12px; margin-top: 60px; padding: 10px 15px; - padding: 0 15px; grid-area: col1; - align-items: left; display: flex; flex-direction: column; justify-content: space-between; + + @media screen and (max-width: 768px) { + margin-left: 0; + margin-top: 20px; + padding: 0; + } `; export const HeroColumn2 = styled.div` @@ -126,6 +133,10 @@ export const HeroColumn2 = styled.div` display: flex; align-items: center; flex-direction: column; + + @media screen and (max-width: 768px) { + padding: 0; + } `; export const TextWrapper = styled.div`