diff --git a/src/collections/programs/hacktoberfest-2023/index.mdx b/src/collections/programs/hacktoberfest-2023/index.mdx
index 4f5a020f4a4d4..a489c833ad12a 100644
--- a/src/collections/programs/hacktoberfest-2023/index.mdx
+++ b/src/collections/programs/hacktoberfest-2023/index.mdx
@@ -33,4 +33,4 @@ Prepare for Hacktoberfest and ready yourself for contributing to CNCF projects t
Earn a Badge
Earn a Hacktoberfest Contributor badge by contributing to Layer5 projects during this Hacktoberfest.
-
\ No newline at end of file
+
diff --git a/src/components/Call-To-Actions/CTA_FullWidth/index.js b/src/components/Call-To-Actions/CTA_FullWidth/index.js
index 7bb450802bcb5..973831e1b0464 100644
--- a/src/components/Call-To-Actions/CTA_FullWidth/index.js
+++ b/src/components/Call-To-Actions/CTA_FullWidth/index.js
@@ -64,31 +64,42 @@ const CTA_FullWidthWrapper = styled.div`
}
@media screen and (max-width: 699px) {
- display: block;
+ display: flex;
+ flex-direction: column;
width: 18rem;
- height: 18rem;
+ height: auto;
margin: 1.5rem auto;
border-radius: 0.25rem;
img {
- width: 18rem;
- height: 18rem;
- position: absolute;
- opacity: 0.35;
- border-radius: 0.25rem;
+ width: 100%;
+ height: auto;
+ object-fit: cover;
+ border-radius: 0.25rem 0.25rem 0 0;
}
.cta-content {
- position: absolute;
- height: 18rem;
- display: block;
- width: 18rem;
- background: none;
- padding: 4rem 1rem;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ padding: 1.5rem 1rem;
+ box-sizing: border-box;
+
+ div {
+ flex: none;
+ width: 100%;
+ }
p {
color: white;
}
+
+ a {
+ flex: none;
+ margin-top: 1rem;
+ }
}
}
`;
@@ -100,7 +111,7 @@ const defaultURL = "https://slack.layer5.io";
const CTA_FullWidth = ({ alt, button_text, category, content, external_link, image, url, heading, ...props }) => {
return (
- { category ? (
+ {category ? (
<>