From 758615e64ba9d2a4e3723853e1d90de8a33af533 Mon Sep 17 00:00:00 2001 From: Santhoshkumar <117272529+Santhosh-testsigma@users.noreply.github.com> Date: Tue, 12 Sep 2023 19:06:57 +0530 Subject: [PATCH] fix: Tutorials CTA UI issue --- src/components/Footer.jsx | 2 +- src/components/Footer.scss | 11 +++++++- src/components/header.jsx | 6 ++--- src/components/navcards.scss | 4 +-- src/pages/tutorials/index.jsx | 2 +- src/templates/page.scss | 48 +++++++++++++++++++++++++++++++++++ 6 files changed, 65 insertions(+), 8 deletions(-) diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx index f0bacb3..f9a7df0 100644 --- a/src/components/Footer.jsx +++ b/src/components/Footer.jsx @@ -12,7 +12,7 @@ const Footer = ()=> { {/* */}
-
+

Learn how to execute low code tests across 3000+ device / browser environments.

Schedule a free demo
diff --git a/src/components/Footer.scss b/src/components/Footer.scss index 62b6c5b..968875c 100644 --- a/src/components/Footer.scss +++ b/src/components/Footer.scss @@ -323,15 +323,24 @@ } .footer-cta{ background-color: #EFEFEF; - padding: 2rem 6rem; + padding: 2rem 3rem; + @media only screen and (max-width: 767px) { + @apply p-8; + } .cta-heading{ flex: 0 0 70%; font-size: 24px !important; line-height: 38px !important; margin: 0 !important; + @media only screen and (max-width: 1023px) { + @apply pb-8; + flex: 0 0 100%; + } } .cta-link{ font-weight: 600; font-size: 18px; + @apply text-center; + height: fit-content; } } \ No newline at end of file diff --git a/src/components/header.jsx b/src/components/header.jsx index 6edaa79..dc0f194 100644 --- a/src/components/header.jsx +++ b/src/components/header.jsx @@ -10,8 +10,8 @@ const Header = () => { }, []); return (
-
- + -
+
GET STARTED FREE BOOK A DEMO diff --git a/src/components/navcards.scss b/src/components/navcards.scss index 36ad91f..0c90125 100644 --- a/src/components/navcards.scss +++ b/src/components/navcards.scss @@ -4,8 +4,8 @@ width: 48%; border: .1rem solid $light-grey; border-radius: 2px; - @media (max-width: $screen_425) { - width: 100%; + @media (max-width: 767px) { + @apply w-full m-8; } &:hover{ background: $black_haze; diff --git a/src/pages/tutorials/index.jsx b/src/pages/tutorials/index.jsx index edacc24..80c4092 100644 --- a/src/pages/tutorials/index.jsx +++ b/src/pages/tutorials/index.jsx @@ -27,7 +27,7 @@ const IndexContent = () => {
-
+

Learn how to execute low code tests across 3000+ device / browser environments.

Schedule a free demo
diff --git a/src/templates/page.scss b/src/templates/page.scss index 2aaf599..d019f96 100644 --- a/src/templates/page.scss +++ b/src/templates/page.scss @@ -537,12 +537,18 @@ code[class*="language-"] { } .card_container{ padding-bottom: 2rem; + .flex{ + display: flex !important; + } } .chat_btn{ padding: 1rem; margin-right: 1rem; background: linear-gradient(0deg, $nile_blue, $nile_blue), $jade_green; border-radius: .2rem; + @media only screen and (max-width: 767px) { + @apply hidden; + } span{ padding-left: .5rem; color: $white; @@ -612,4 +618,46 @@ code[class*="language-"] { .fixed{ display: none; +} +.logo-block { + @media (max-width: 767px) { + @apply w-full; + } + svg { + @media (max-width: 1279px) { + @apply my-4 mx-0; + } + } +} +.search-block { + @media (max-width: 767px) { + @apply w-full pb-4 pt-0 py-0; + } + @media (min-width: 768px) { + order: 2; + } + @media (min-width: 768px) { + width: 60%; + } + @media (min-width: 1024px) { + @apply w-1/5; + } + @media (max-width: 1279px) { + @apply p-0; + } + > a { + @media (min-width: 768px) { + @apply whitespace-nowrap; + } + @media only screen and (max-width: 767px) { + &:last-child{ + @apply hidden; + } + } + } +} +.header-container{ + @media only screen and (max-width: 767px) { + @apply px-8; + } } \ No newline at end of file