From 38221644262ecc48525a13d1742abd78c324927f Mon Sep 17 00:00:00 2001 From: Sahil Khan Date: Wed, 26 Mar 2025 16:21:43 +0530 Subject: [PATCH 1/4] make flex direction column in mobile screens Signed-off-by: Sahil Khan --- src/styles/pages/LearnNow.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/styles/pages/LearnNow.ts b/src/styles/pages/LearnNow.ts index fd674a52..85461e6b 100644 --- a/src/styles/pages/LearnNow.ts +++ b/src/styles/pages/LearnNow.ts @@ -2,6 +2,10 @@ import styled from "styled-components"; export const LearnNowContainer = styled.div` display: flex; + + @media (max-width: 767px) { + flex-direction: column; + } `; export const SidebarContainer = styled.div` From b0b25e6908396c30718e84c58be0a8a8df81b4b8 Mon Sep 17 00:00:00 2001 From: Sahil Khan Date: Wed, 26 Mar 2025 16:22:24 +0530 Subject: [PATCH 2/4] make display none the sidebar Container (#331) Signed-off-by: Sahil Khan --- src/styles/pages/LearnNow.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/styles/pages/LearnNow.ts b/src/styles/pages/LearnNow.ts index 85461e6b..e7b8000f 100644 --- a/src/styles/pages/LearnNow.ts +++ b/src/styles/pages/LearnNow.ts @@ -31,6 +31,10 @@ export const SidebarContainer = styled.div` text-decoration: none; color: var(--text-color) !important; } + + @media (max-width: 767px) { + display: none; + } `; export const ContentContainer = styled.div` From d0f28802129f5a3031279e530abeaa02a7701542 Mon Sep 17 00:00:00 2001 From: Sahil Khan Date: Wed, 26 Mar 2025 16:23:04 +0530 Subject: [PATCH 3/4] adjest margins for better layout (#331) Signed-off-by: Sahil Khan --- src/styles/pages/LearnNow.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/styles/pages/LearnNow.ts b/src/styles/pages/LearnNow.ts index e7b8000f..d138711a 100644 --- a/src/styles/pages/LearnNow.ts +++ b/src/styles/pages/LearnNow.ts @@ -42,4 +42,9 @@ export const ContentContainer = styled.div` padding: 20px; background-color: var(--bg-color) !important; color: var(--text-color) !important; + + @media (max-width: 767px) { + margin-top: 25px; + margin-bottom: 30px; + } `; From 4613997a02547b39f630e2bdd0b42a3753baa7b3 Mon Sep 17 00:00:00 2001 From: Sahil Khan Date: Wed, 26 Mar 2025 16:23:36 +0530 Subject: [PATCH 4/4] align heading with new layout of the page (#331) Signed-off-by: Sahil Khan --- src/styles/pages/LearnNow.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/styles/pages/LearnNow.ts b/src/styles/pages/LearnNow.ts index d138711a..e7f7ebcb 100644 --- a/src/styles/pages/LearnNow.ts +++ b/src/styles/pages/LearnNow.ts @@ -46,5 +46,8 @@ export const ContentContainer = styled.div` @media (max-width: 767px) { margin-top: 25px; margin-bottom: 30px; + + h1 { + margin-top: 0; } `;