From 15411e79c928af3f8ce59aeb55f902ecd415e21d Mon Sep 17 00:00:00 2001 From: yash37158 Date: Wed, 4 Sep 2024 01:30:13 +0530 Subject: [PATCH] fix: resolve layout inconsistency in CTA_Bottom for mobile screens Signed-off-by: yash37158 --- .../Call-To-Actions/CTA_Bottom/index.js | 23 ++++++++++++++++++- 1 file changed, 22 insertions(+), 1 deletion(-) diff --git a/src/components/Call-To-Actions/CTA_Bottom/index.js b/src/components/Call-To-Actions/CTA_Bottom/index.js index d4e250e19ace..a3b3e29d4470 100644 --- a/src/components/Call-To-Actions/CTA_Bottom/index.js +++ b/src/components/Call-To-Actions/CTA_Bottom/index.js @@ -17,6 +17,11 @@ const CTA_BottomWrapper = styled.div` border-radius: 0.5rem; overflow: hidden; + @media (max-width: 507px) { + flex-direction: column; + height: auto; + } + .cta-content { padding: 0.5rem 1.5rem; text-align: center; @@ -30,6 +35,11 @@ const CTA_BottomWrapper = styled.div` p { margin-top: 0.5rem; } + + @media (max-width: 507px) { + max-width: 100%; + margin-right: 0; + } } img { @@ -39,10 +49,20 @@ const CTA_BottomWrapper = styled.div` padding: 1rem; max-height: 100%; border-radius: 0 0.5rem 0.5rem 0; + + @media (max-width: 507px) { + max-width: 100%; + padding: 0; + border-radius: 0; + } } button { width: fit-content; + + @media (max-width: 507px) { + margin-top: 1rem; + } } `; @@ -53,6 +73,7 @@ const defaultURL = "https://slack.layer5.io"; const CTA_Bottom = ({ alt, button_text, category, content, external_link, image, url, heading, ...props }) => { return ( + {category
{ category ? ( <> @@ -67,7 +88,7 @@ const CTA_Bottom = ({ alt, button_text, category, content, external_link, image, )}
- {category +
); };