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 ? ( <> {Categories[category]["Image_Alt"]}