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 {