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] 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 {