Solve issue with cards not fitting on smaller screens in Community Ha…

…ndbook page Signed-off-by: krish <[email protected]>
krishkumar84 · Aug 2, 2024 · 19503ca · 19503ca
1 parent d25e6a7
commit 19503ca
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git 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
@@ -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 {