From b755c53814c37811d6f15b8a19f14612995bf50a Mon Sep 17 00:00:00 2001 From: Parth Gartan Date: Tue, 22 Sep 2026 07:06:31 +0000 Subject: [PATCH 1/7] fix(community): remove button wrapper from callout cards Signed-off-by: Parth Gartan --- .../Adventures-Callout/discuss.style.js | 289 ++++++++-------- src/sections/Adventures-Callout/index.js | 12 +- src/sections/Discuss-Callout/discuss.style.js | 322 +++++++++--------- src/sections/Discuss-Callout/index.js | 14 +- 4 files changed, 318 insertions(+), 319 deletions(-) diff --git a/src/sections/Adventures-Callout/discuss.style.js b/src/sections/Adventures-Callout/discuss.style.js index a543dd9070dc1b..3c47afccbda5bf 100644 --- a/src/sections/Adventures-Callout/discuss.style.js +++ b/src/sections/Adventures-Callout/discuss.style.js @@ -1,167 +1,168 @@ import styled from "styled-components"; const AdventuresWrapper = styled.div` - background-color:none; - padding: 1.5rem 0.625rem 1rem; - overflow: hidden; - h2{ - font-weight: 500; + background-color: none; + padding: 1.5rem 0.625rem 1rem; + overflow: hidden; + h2 { + font-weight: 500; + } + h2 span { + color: ${(props) => props.theme.secondaryColor}; + } + .logo { + width: 100%; + } + .explain { + padding-top: 0rem; + text-align: center; + p { + text-align: center; + color: ${(props) => props.theme.white}; + padding: 0px 3.125rem; } - h2 span{ - color:${(props) => props.theme.secondaryColor}; + h2 { + color: ${(props) => props.theme.white}; + line-height: 1.2; } - .logo{ - width: 100%; + h1 { + padding: 1.25rem 0px; } - .explain { - padding-top: 0rem; - text-align: center; - p { - text-align: center; - color: ${(props) => props.theme.white}; - padding: 0px 3.125rem; + .cards { + margin: 0.15rem auto 0; + max-width: 50rem; + padding: 1.5rem 2rem 0rem 2rem; + background-color: none; + border-radius: 25px; + .card { + -webkit-transition: 450ms all; + transition: 450ms all; + margin: auto; + padding: 1.25rem; + background-color: #1e2117; + border-radius: 25px; + overflow: hidden; + p { + text-align: center; + padding: 0px 0px 1px 0px; + letter-spacing: 0; + font-size: 16px; } h2 { - color: ${(props) => props.theme.white}; - line-height: 1.2; + text-align: center; + font-size: 28px; + text-transform: uppercase; + clear: both; + margin-bottom: 0rem; + margin-top: 1rem; } - h1 { - padding: 1.25rem 0px; + &:hover, + &:focus:not(:focus-visible) { + outline: none; } - .cards { - margin: 0.15rem auto 0 ; - max-width: 50rem; - padding: 1.5rem 2rem 0rem 2rem; - background-color: none; - border-radius: 25px; - .card { - -webkit-transition: 450ms all; - transition: 450ms all; - margin: auto; - padding: 1.25rem; - background-color: #1E2117; - border-radius: 25px; - overflow: hidden; - p { - text-align: center; - padding: 0px 0px 1px 0px; - letter-spacing: 0; - font-size: 16px; - } - h2 { - text-align: center; - font-size: 28px; - text-transform:uppercase; - clear: both; - margin-bottom: 0rem; - margin-top: 1rem; - } - &:hover, - &:focus:not(:focus-visible) { - outline: none; - } - &:hover{ - transform: translateY(0.03rem); - box-shadow: 0 2px 10px #00d3a9; - } - } - } + &:hover { + transform: translateY(0.03rem); + box-shadow: 0 2px 10px #00d3a9; } + } } + } - button{ - color: #1E2117; - padding: 0; - border: 0; - background: none; - transition: color 0.25s,border-color 0.25s,transform 0.25s,box-shadow 0.25s; - cursor: pointer; - } - @media only screen and (min-width: 768px){ - @media only screen and (min-width: 1211px){ - .explain { - .cards { - padding: 0; - .card { - height:20rem; - width: 23.8rem; - } - } - } + button { + color: #1e2117; + padding: 0; + border: 0; + background: none; + transition: + color 0.25s, + border-color 0.25s, + transform 0.25s, + box-shadow 0.25s; + cursor: pointer; + } + @media only screen and (min-width: 768px) { + @media only screen and (min-width: 1211px) { + .explain { + .cards { + padding: 0; + .card { + height: 20rem; + width: 23.8rem; + } } - @media only screen and (max-width: 1211px){ - .explain { - .cards { - padding: 0; - h2 { - font-size: 25px; - line-height: 35px; - } - p { - font-size: 15px - } - .card{ - width:23rem; - height:20rem; - } - } - } - } + } + } + @media only screen and (max-width: 1211px) { + .explain { + .cards { + padding: 0; + h2 { + font-size: 25px; + line-height: 35px; + } + p { + font-size: 15px; + } + .card { + width: 23rem; + height: 20rem; + } } - - @media only screen and (max-width: 992px){ - - .explain { - .cards { - padding: 0; - .card { - h2 { - font-size: 22px; - line-height: 32px; - } - p { - font-size: 13px; - line-height: 23px; - } - width:18rem; - height:18rem; - } - } - button { - padding: 0; - } - } + } + } + } + + @media only screen and (max-width: 992px) { + .explain { + .cards { + padding: 0; + .card { + h2 { + font-size: 22px; + line-height: 32px; + } + p { + font-size: 13px; + line-height: 23px; + } + width: 18rem; + height: 18rem; } + } + button { + padding: 0; + } } - @media only screen and (max-width: 450px){ - .explain { - .cards { - padding: 1rem 1rem 1rem 1rem; - .card { - padding: 0.5rem; - h2 { - font-size: 25px; - } - p{ - font-size: 15px; - } - } - } + } + @media only screen and (max-width: 450px) { + .explain { + .cards { + padding: 1rem 1rem 1rem 1rem; + .card { + padding: 0.5rem; + h2 { + font-size: 25px; + } + p { + font-size: 15px; + } } + } } - @media only screen and (max-width: 375px){ - .explain { - .cards { - padding: 1rem .5rem 1rem .5rem; - h2 { - font-size: 22px; - } - p{ - font-size: 13px; - } - } + } + @media only screen and (max-width: 375px) { + .explain { + .cards { + padding: 1rem 0.5rem 1rem 0.5rem; + h2 { + font-size: 22px; } - } + p { + font-size: 13px; + } + } + } + } `; export default AdventuresWrapper; diff --git a/src/sections/Adventures-Callout/index.js b/src/sections/Adventures-Callout/index.js index df195b9779e72a..2e99bacf17926a 100644 --- a/src/sections/Adventures-Callout/index.js +++ b/src/sections/Adventures-Callout/index.js @@ -23,13 +23,11 @@ const AdventuresCallout = () => {

Adventures of Five & Friends

{/*

Meet Five, our intergalatic Cloud Native Hero

*/} - + diff --git a/src/sections/Discuss-Callout/discuss.style.js b/src/sections/Discuss-Callout/discuss.style.js index 529c100da3af81..de9db84834f36b 100644 --- a/src/sections/Discuss-Callout/discuss.style.js +++ b/src/sections/Discuss-Callout/discuss.style.js @@ -1,184 +1,186 @@ import styled from "styled-components"; const DiscussWrapper = styled.div` - background-color:none; - padding: 1.5rem 0.625rem 1rem; - - overflow: hidden; - h2{ - font-weight: 500; + background-color: none; + padding: 1.5rem 0.625rem 1rem; + + overflow: hidden; + h2 { + font-weight: 500; + } + h2 span { + color: ${(props) => props.theme.secondaryColor}; + } + .logo { + width: 200px; + } + + .explain { + padding-top: 0rem; + text-align: center; + p { + text-align: center; + color: ${(props) => props.theme.white}; + padding: 0px 3.125rem; } - h2 span{ - color:${(props) => props.theme.secondaryColor}; + h2 { + color: ${(props) => props.theme.white}; } - .logo{ - width: 200px; + h1 { + padding: 1.25rem 0px; } - - .explain { - padding-top: 0rem; - text-align: center; - p { - text-align: center; - color: ${(props) => props.theme.white}; - padding: 0px 3.125rem; + .cards { + margin: 0.15rem auto 0; + max-width: 50rem; + padding: 1.5rem 2rem 0rem 2rem; + background-color: none; + border-radius: 25px; + .card { + height: 20rem; + -webkit-transition: 450ms all; + transition: 450ms all; + margin: auto; + padding: 1.25rem; + background-color: #1e2117; + border-radius: 25px; + p { + text-align: center; + padding: 0px 0px 1px 0px; + letter-spacing: 0; + font-size: 16px; } h2 { - color: ${(props) => props.theme.white}; + text-align: center; + font-size: 28px; + text-transform: uppercase; + clear: both; + margin-bottom: 0rem; + margin-top: 1rem; } - h1 { - padding: 1.25rem 0px; + &:focus:not(:focus-visible) { + outline: none; } - .cards { - margin: 0.15rem auto 0 ; - max-width: 50rem; - padding: 1.5rem 2rem 0rem 2rem; - background-color: none; - border-radius: 25px; - .card { - height:20rem; - -webkit-transition: 450ms all; - transition: 450ms all; - margin: auto; - padding: 1.25rem; - background-color: #1E2117; - border-radius: 25px; - p { - text-align: center; - padding: 0px 0px 1px 0px; - letter-spacing: 0; - font-size: 16px; - } - h2 { - text-align: center; - font-size: 28px; - text-transform:uppercase; - clear: both; - margin-bottom: 0rem; - margin-top: 1rem; - } - &:focus:not(:focus-visible) { - outline: none; - } - &:hover{ - transform: translateY(0.03rem); - box-shadow: 0 2px 10px #00d3a9; - } - } - } + &:hover { + transform: translateY(0.03rem); + box-shadow: 0 2px 10px #00d3a9; } + } } + } - button{ - color: #1E2117; - padding: 0.2em 1em; - border: 2px solid; - background: none; - transition: color 0.25s,border-color 0.25s,transform 0.25s,box-shadow 0.25s; - cursor: pointer; + button { + color: #1e2117; + padding: 0.2em 1em; + border: 2px solid; + background: none; + transition: + color 0.25s, + border-color 0.25s, + transform 0.25s, + box-shadow 0.25s; + cursor: pointer; + } + @media only screen and (min-width: 768px) { + @media only screen and (min-width: 1211px) { + .card-align { + padding: 2rem 0; + } + .explain { + .cards { + padding: 0; + h2 { + padding-bottom: 1rem; + } + .card { + height: 20rem; + width: 23.8rem; + } + } + } } - @media only screen and (min-width: 768px){ - @media only screen and (min-width: 1211px){ - .card-align{ - padding:2rem 0; - } - .explain { - .cards { - padding: 0; - h2{ - padding-bottom:1rem; - } - .card { - height:20rem; - width: 23.8rem; - } - } - } + @media only screen and (max-width: 1211px) { + .card-align { + padding: 2rem 0; + } + .explain { + .cards { + padding: 0; + h2 { + padding-bottom: 1rem; + font-size: 25px; + line-height: 35px; + } + p { + font-size: 15px; + } + .card { + width: 23rem; + height: 20rem; + } } - @media only screen and (max-width: 1211px){ - .card-align{ - padding:2rem 0; - } - .explain { - .cards { - padding: 0; - h2 { - padding-bottom:1rem; - font-size: 25px; - line-height: 35px; - } - p { - font-size: 15px - } - .card{ - width:23rem; - height:20rem; - } - } - } - } + } + } + } + + @media only screen and (max-width: 992px) { + .card-align { + padding: 1.1rem 0; + } + .explain { + .cards { + padding: 0; + .card { + h2 { + font-size: 22px; + line-height: 32px; + padding-bottom: 1rem; + } + p { + font-size: 13px; + line-height: 23px; + } + width: 18rem; + height: 18rem; } - - @media only screen and (max-width: 992px){ - .card-align{ - padding:1.1rem 0; - } - .explain { - .cards { - padding: 0; - .card { - h2 { - font-size: 22px; - line-height: 32px; - padding-bottom:1rem; - } - p { - font-size: 13px; - line-height: 23px; - } - width:18rem; - height:18rem; - } - } - button { - padding: 0; - } - } + } + button { + padding: 0; + } + } + } + + @media only screen and (max-width: 450px) { + .card-align { + padding: 2rem 0; + } + .explain { + .cards { + padding: 1rem 1rem 1rem 1rem; + .card { + padding: 0.5rem; + h2 { + font-size: 25px; + } + p { + font-size: 15px; + } } + } } - - @media only screen and (max-width: 450px){ - .card-align{ - padding:2rem 0; + } + @media only screen and (max-width: 375px) { + .explain { + .cards { + padding: 1rem 0.5rem 1rem 0.5rem; + h2 { + font-size: 22px; } - .explain { - .cards { - padding: 1rem 1rem 1rem 1rem; - .card { - padding: 0.5rem; - h2 { - font-size: 25px; - } - p{ - font-size: 15px; - } - } - } + p { + font-size: 13px; } + } } - @media only screen and (max-width: 375px){ - .explain { - .cards { - padding: 1rem .5rem 1rem .5rem; - h2 { - font-size: 22px; - } - p{ - font-size: 13px; - } - } - } - } + } `; export default DiscussWrapper; diff --git a/src/sections/Discuss-Callout/index.js b/src/sections/Discuss-Callout/index.js index 1f34ddd27301ea..5c7659db4e8921 100644 --- a/src/sections/Discuss-Callout/index.js +++ b/src/sections/Discuss-Callout/index.js @@ -27,14 +27,12 @@ const DiscussCallout = () => { Discussion Forum

- + Discuss From 6c61b8098bed04fc82ba2a5c3a2ac9993f797eb4 Mon Sep 17 00:00:00 2001 From: Parth Gartan Date: Tue, 22 Sep 2026 08:03:11 +0000 Subject: [PATCH 2/7] style: nest tablet media query under min-width 768px and remove unused button styles Signed-off-by: Parth Gartan --- .../Adventures-Callout/discuss.style.js | 46 ++++++---------- src/sections/Discuss-Callout/discuss.style.js | 54 +++++++------------ 2 files changed, 34 insertions(+), 66 deletions(-) diff --git a/src/sections/Adventures-Callout/discuss.style.js b/src/sections/Adventures-Callout/discuss.style.js index 3c47afccbda5bf..563e45f02cef3d 100644 --- a/src/sections/Adventures-Callout/discuss.style.js +++ b/src/sections/Adventures-Callout/discuss.style.js @@ -68,18 +68,6 @@ const AdventuresWrapper = styled.div` } } - button { - color: #1e2117; - padding: 0; - border: 0; - background: none; - transition: - color 0.25s, - border-color 0.25s, - transform 0.25s, - box-shadow 0.25s; - cursor: pointer; - } @media only screen and (min-width: 768px) { @media only screen and (min-width: 1211px) { .explain { @@ -110,28 +98,24 @@ const AdventuresWrapper = styled.div` } } } - } - - @media only screen and (max-width: 992px) { - .explain { - .cards { - padding: 0; - .card { - h2 { - font-size: 22px; - line-height: 32px; - } - p { - font-size: 13px; - line-height: 23px; + @media only screen and (max-width: 992px) { + .explain { + .cards { + padding: 0; + .card { + h2 { + font-size: 22px; + line-height: 32px; + } + p { + font-size: 13px; + line-height: 23px; + } + width: 18rem; + height: 18rem; } - width: 18rem; - height: 18rem; } } - button { - padding: 0; - } } } @media only screen and (max-width: 450px) { diff --git a/src/sections/Discuss-Callout/discuss.style.js b/src/sections/Discuss-Callout/discuss.style.js index de9db84834f36b..5c611db6a70dd3 100644 --- a/src/sections/Discuss-Callout/discuss.style.js +++ b/src/sections/Discuss-Callout/discuss.style.js @@ -68,18 +68,6 @@ const DiscussWrapper = styled.div` } } - button { - color: #1e2117; - padding: 0.2em 1em; - border: 2px solid; - background: none; - transition: - color 0.25s, - border-color 0.25s, - transform 0.25s, - box-shadow 0.25s; - cursor: pointer; - } @media only screen and (min-width: 768px) { @media only screen and (min-width: 1211px) { .card-align { @@ -120,32 +108,28 @@ const DiscussWrapper = styled.div` } } } - } - - @media only screen and (max-width: 992px) { - .card-align { - padding: 1.1rem 0; - } - .explain { - .cards { - padding: 0; - .card { - h2 { - font-size: 22px; - line-height: 32px; - padding-bottom: 1rem; - } - p { - font-size: 13px; - line-height: 23px; + @media only screen and (max-width: 992px) { + .card-align { + padding: 1.1rem 0; + } + .explain { + .cards { + padding: 0; + .card { + h2 { + font-size: 22px; + line-height: 32px; + padding-bottom: 1rem; + } + p { + font-size: 13px; + line-height: 23px; + } + width: 18rem; + height: 18rem; } - width: 18rem; - height: 18rem; } } - button { - padding: 0; - } } } From 9b793db38a2f26a5e7e0b7f6b502081e51cb5a16 Mon Sep 17 00:00:00 2001 From: Parth Gartan Date: Tue, 22 Sep 2026 09:10:43 +0000 Subject: [PATCH 3/7] fix(adventures): use transient props on Col in AdventuresCallout Signed-off-by: Parth Gartan --- src/sections/Adventures-Callout/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/sections/Adventures-Callout/index.js b/src/sections/Adventures-Callout/index.js index 2e99bacf17926a..7afcbfed2a4169 100644 --- a/src/sections/Adventures-Callout/index.js +++ b/src/sections/Adventures-Callout/index.js @@ -11,7 +11,7 @@ const AdventuresCallout = () => {
- + Date: Tue, 22 Sep 2026 09:56:40 +0000 Subject: [PATCH 4/7] feat(discuss): add visual CTA wrapper with theme hover and focus-visible Signed-off-by: Parth Gartan --- src/sections/Discuss-Callout/discuss.style.js | 35 +++++++++++++++++++ src/sections/Discuss-Callout/index.js | 14 ++++---- 2 files changed, 43 insertions(+), 6 deletions(-) diff --git a/src/sections/Discuss-Callout/discuss.style.js b/src/sections/Discuss-Callout/discuss.style.js index 5c611db6a70dd3..2e0cb59251e36e 100644 --- a/src/sections/Discuss-Callout/discuss.style.js +++ b/src/sections/Discuss-Callout/discuss.style.js @@ -13,6 +13,41 @@ const DiscussWrapper = styled.div` } .logo { width: 200px; + max-width: 100%; + display: block; + } + + .logo-wrapper { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0.35rem 1.25rem; + border: 2px solid ${(props) => props.theme.secondaryColor}; + border-radius: 6px; + background: transparent; + transition: all 0.25s ease; + } + + a { + display: block; + text-decoration: none; + border-radius: 25px; + + &:focus:not(:focus-visible) { + outline: none; + } + &:focus-visible { + outline: 3px solid ${(props) => props.theme.secondaryColor}; + outline-offset: 3px; + } + + &:hover, + &:focus-visible { + .logo-wrapper { + border-color: ${(props) => props.theme.caribbeanGreenColor || props.theme.secondaryColor}; + box-shadow: 0 0 10px ${(props) => props.theme.secondaryColor}; + } + } } .explain { diff --git a/src/sections/Discuss-Callout/index.js b/src/sections/Discuss-Callout/index.js index 5c7659db4e8921..ab9f0823143d83 100644 --- a/src/sections/Discuss-Callout/index.js +++ b/src/sections/Discuss-Callout/index.js @@ -27,12 +27,14 @@ const DiscussCallout = () => { Discussion Forum

- Discuss +
+ Discuss +
From 454fe9d9e87a7ce8ff078a848613dfb02c1f91ce Mon Sep 17 00:00:00 2001 From: Parth Gartan Date: Mon, 28 Sep 2026 06:08:01 +0000 Subject: [PATCH 5/7] style(discuss): update CTA border to white and restore tablet responsive query Signed-off-by: Parth Gartan --- src/sections/Discuss-Callout/discuss.style.js | 42 ++++++++++--------- 1 file changed, 22 insertions(+), 20 deletions(-) diff --git a/src/sections/Discuss-Callout/discuss.style.js b/src/sections/Discuss-Callout/discuss.style.js index 2e0cb59251e36e..06c43ccd590049 100644 --- a/src/sections/Discuss-Callout/discuss.style.js +++ b/src/sections/Discuss-Callout/discuss.style.js @@ -22,7 +22,7 @@ const DiscussWrapper = styled.div` align-items: center; justify-content: center; padding: 0.35rem 1.25rem; - border: 2px solid ${(props) => props.theme.secondaryColor}; + border: 2px solid ${(props) => props.theme.white}; border-radius: 6px; background: transparent; transition: all 0.25s ease; @@ -72,6 +72,7 @@ const DiscussWrapper = styled.div` border-radius: 25px; .card { height: 20rem; + max-width: 100%; -webkit-transition: 450ms all; transition: 450ms all; margin: auto; @@ -143,26 +144,27 @@ const DiscussWrapper = styled.div` } } } - @media only screen and (max-width: 992px) { - .card-align { - padding: 1.1rem 0; - } - .explain { - .cards { - padding: 0; - .card { - h2 { - font-size: 22px; - line-height: 32px; - padding-bottom: 1rem; - } - p { - font-size: 13px; - line-height: 23px; - } - width: 18rem; - height: 18rem; + } + + @media only screen and (max-width: 992px) { + .card-align { + padding: 1.1rem 0; + } + .explain { + .cards { + padding: 0; + .card { + h2 { + font-size: 22px; + line-height: 32px; + padding-bottom: 1rem; + } + p { + font-size: 13px; + line-height: 23px; } + width: 18rem; + height: 18rem; } } } From c8dcedb3164efe32a9776eaeb34e3f3b214d846a Mon Sep 17 00:00:00 2001 From: Parth Gartan Date: Mon, 28 Sep 2026 11:33:00 +0000 Subject: [PATCH 6/7] style(discuss): nest tablet media query under min-width 768px for consistent card sizing Signed-off-by: Parth Gartan --- src/sections/Discuss-Callout/discuss.style.js | 40 +++++++++---------- 1 file changed, 19 insertions(+), 21 deletions(-) diff --git a/src/sections/Discuss-Callout/discuss.style.js b/src/sections/Discuss-Callout/discuss.style.js index 06c43ccd590049..36821d5b9d1013 100644 --- a/src/sections/Discuss-Callout/discuss.style.js +++ b/src/sections/Discuss-Callout/discuss.style.js @@ -143,28 +143,26 @@ const DiscussWrapper = styled.div` } } } - } - } - - @media only screen and (max-width: 992px) { - .card-align { - padding: 1.1rem 0; - } - .explain { - .cards { - padding: 0; - .card { - h2 { - font-size: 22px; - line-height: 32px; - padding-bottom: 1rem; - } - p { - font-size: 13px; - line-height: 23px; + @media only screen and (max-width: 992px) { + .card-align { + padding: 1.1rem 0; + } + .explain { + .cards { + padding: 0; + .card { + h2 { + font-size: 22px; + line-height: 32px; + padding-bottom: 1rem; + } + p { + font-size: 13px; + line-height: 23px; + } + width: 18rem; + height: 18rem; } - width: 18rem; - height: 18rem; } } } From d52e09de295fdc635c215efd1c6e135593ad36fd Mon Sep 17 00:00:00 2001 From: Parth Gartan Date: Mon, 28 Sep 2026 11:55:17 +0000 Subject: [PATCH 7/7] style(callout): balance card content distribution and ensure matching card sizing across viewports Signed-off-by: Parth Gartan --- src/sections/Adventures-Callout/discuss.style.js | 5 +++++ src/sections/Discuss-Callout/discuss.style.js | 12 ++++++++++++ 2 files changed, 17 insertions(+) diff --git a/src/sections/Adventures-Callout/discuss.style.js b/src/sections/Adventures-Callout/discuss.style.js index 563e45f02cef3d..15231d76fa1af3 100644 --- a/src/sections/Adventures-Callout/discuss.style.js +++ b/src/sections/Adventures-Callout/discuss.style.js @@ -35,6 +35,8 @@ const AdventuresWrapper = styled.div` background-color: none; border-radius: 25px; .card { + height: 20rem; + max-width: 100%; -webkit-transition: 450ms all; transition: 450ms all; margin: auto; @@ -42,6 +44,9 @@ const AdventuresWrapper = styled.div` background-color: #1e2117; border-radius: 25px; overflow: hidden; + display: flex; + flex-direction: column; + justify-content: space-between; p { text-align: center; padding: 0px 0px 1px 0px; diff --git a/src/sections/Discuss-Callout/discuss.style.js b/src/sections/Discuss-Callout/discuss.style.js index 36821d5b9d1013..cedf58a2f51263 100644 --- a/src/sections/Discuss-Callout/discuss.style.js +++ b/src/sections/Discuss-Callout/discuss.style.js @@ -79,11 +79,22 @@ const DiscussWrapper = styled.div` padding: 1.25rem; background-color: #1e2117; border-radius: 25px; + .parentcard, + .section-title, + .card-align { + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-around; + } p { text-align: center; padding: 0px 0px 1px 0px; letter-spacing: 0; font-size: 16px; + max-width: 20rem; + margin: 0 auto; } h2 { text-align: center; @@ -143,6 +154,7 @@ const DiscussWrapper = styled.div` } } } + } @media only screen and (max-width: 992px) { .card-align { padding: 1.1rem 0;