From 19503ca4449f8a5f5f06ba4e24471f990f3f795f Mon Sep 17 00:00:00 2001
From: krish <114145459+krishkumar84@users.noreply.github.com>
Date: Fri, 2 Aug 2024 12:49:35 +0000
Subject: [PATCH 1/2] Solve issue with cards not fitting on smaller screens in
 Community Handbook page

Signed-off-by: krish <114145459+krishkumar84@users.noreply.github.com>
---
 src/components/AdventuresVol/adventures-vol.style.js | 3 ++-
 src/components/HandbookCard/HandbookCard.style.js    | 6 +++++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/AdventuresVol/adventures-vol.style.js b/src/components/AdventuresVol/adventures-vol.style.js
index 03e7dee49fef..ede5571048d2 100644
--- a/src/components/AdventuresVol/adventures-vol.style.js
+++ b/src/components/AdventuresVol/adventures-vol.style.js
@@ -8,7 +8,8 @@ export const AdventuresVolWrapper = styled.div`
 
     .handbook__card {
 	  border-radius: 5px;
-	  width: 25rem;
+	  width: 100%;
+	  max-width: 25rem;
 	  box-shadow: 0 5px 10px ${props => props.theme.green00D3A9ToGreyE6E6E6};
 	  overflow: hidden;
 	  height: 19rem;
diff --git a/src/components/HandbookCard/HandbookCard.style.js b/src/components/HandbookCard/HandbookCard.style.js
index 00f99e62315e..065619f7c9eb 100644
--- a/src/components/HandbookCard/HandbookCard.style.js
+++ b/src/components/HandbookCard/HandbookCard.style.js
@@ -8,12 +8,16 @@ export const HandbookCardWrapper = styled.div`
 
     .handbook__card {
 	  border-radius: 5px;
-	  width: 25rem;
+	  width: 100%;
+	  max-width: 25rem;
 	  box-shadow: 0 5px 10px ${props => props.theme.green00D3A9ToGreyE6E6E6};
 	  overflow: hidden;
 	  height: 19rem;
 	  position: relative;
 		transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
+		@media (max-width: 420px) {
+        font-size: 1rem;
+        }
 	}
 
 	.handbook__card--head {

From e50a365764c26d1b426e7dbe80caeb077305468f Mon Sep 17 00:00:00 2001
From: krish <114145459+krishkumar84@users.noreply.github.com>
Date: Fri, 2 Aug 2024 14:34:08 +0000
Subject: [PATCH 2/2] updated code

Signed-off-by: krish <114145459+krishkumar84@users.noreply.github.com>
---
 src/components/HandbookCard/HandbookCard.style.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/HandbookCard/HandbookCard.style.js b/src/components/HandbookCard/HandbookCard.style.js
index 065619f7c9eb..87b71754528f 100644
--- a/src/components/HandbookCard/HandbookCard.style.js
+++ b/src/components/HandbookCard/HandbookCard.style.js
@@ -15,9 +15,6 @@ export const HandbookCardWrapper = styled.div`
 	  height: 19rem;
 	  position: relative;
 		transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
-		@media (max-width: 420px) {
-        font-size: 1rem;
-        }
 	}
 
 	.handbook__card--head {
@@ -59,6 +56,9 @@ export const HandbookCardWrapper = styled.div`
 	  font-weight: 400;
 	  font-size: 1.1rem;
 		transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
+		@media (max-width: 420px) {
+        font-size: 1rem;
+        }
 	}
 
 	.handbook__card--lm__container {