added media query in css

Signed-off-by: msivasubramaniaan <msivasub@redhat.com>

Author: msivasubramaniaan

src/webview/welcome/app/welcome.scss

@@ -114,7 +114,36 @@ section {
 .sticky-section-content .sticky-section-exten {
     top: 0;
     width: 100%;
-    height: 10rem;
+}
+
+@media screen and (min-width: 120px) and (max-width: 400px) {
+    .sticky-section-content .sticky-section-exten{
+        height: 8vh !important;
+    }
+
+    .sticky-section {
+        height: 50vh !important;
+    }
+}
+
+@media only screen and (min-width: 440px) and (max-width: 1080px) {
+    .sticky-section-content .sticky-section-exten{
+        height: 10vh !important;
+    }
+
+    .sticky-section {
+        height: 65vh !important;
+    }
+}
+
+@media only screen and (min-width: 1080px)  and (max-width: 2500px)  {
+    .sticky-section-content .sticky-section-exten{
+        height: 12vh !important;
+    }
+
+    .sticky-section {
+        height: 65vh !important;
+    }
 }
 
 .sticky-content-section {
@@ -209,6 +238,7 @@ section {
 
 .sticky-section-hint {
     width: 53.125rem;
+    word-spacing: 2px !important;
 }
 
 .section__footer {
@@ -264,7 +294,6 @@ section {
 .sticky-section {
     display: flex;
     flex-direction: row;
-    height: 70vh;
     margin-left: 10rem;
     top: 0%;
     background: inherit;
@@ -445,3 +474,7 @@ li {
     border-radius: 50%;
     margin-top: 5px;
 }
+
+b {
+    font-weight: bold !important;
+}

src/webview/welcome/app/welcomePage.tsx

@@ -372,22 +372,22 @@ export class Welcome extends React.Component<DefaultProps, {
                         </div>
                         <section className='sticky-section-content'>
                             <div className='sticky-section-exten'>
-                                <p className='section__header-hint sticky-section-hint'>Allows developers to easily <p className='highlight'>create, deploy and live debug</p> container applications running on OpenShift &#38; Kubernetes. Thus enhancing the development inner loop workflow through One-click actions right from IDE.</p>
+                                <p className='section__header-hint sticky-section-hint'>Allows developers to easily <b>create, deploy and live debug</b> container applications running on OpenShift &#38; Kubernetes. Thus enhancing the development inner loop workflow through One-click actions right from IDE.</p>
                             </div>
                             <div className='sticky-section-exten'>
-                                <p className='section__header-hint sticky-section-hint'>Allows developers to <p className='highlight'>Push code fast and often.</p> Spend less time maintaining your deployment infrastructure and more time coding. Immediately have your application running each time you compile.</p>
+                                <p className='section__header-hint sticky-section-hint'>Allows developers to <b>Push code fast and often.</b> Spend less time maintaining your deployment infrastructure and more time coding. Immediately have your application running each time you compile.</p>
                             </div>
                             <div className='sticky-section-exten'>
-                                <p className='section__header-hint sticky-section-hint'>Allows support for importing devfile templates to set up specific applications quickly. This helps to deploy them all, big and small. Deploy a simple Node.JS application or even a complex Operator-backed service.</p>
+                                <p className='section__header-hint sticky-section-hint'><b>Import your code from git</b> and deploy on OpenShift using recommended devfile.</p>
                             </div>
                             <div className='sticky-section-exten'>
-                                <p className='section__header-hint sticky-section-hint'>Allows to Run your tests directly on the cluster. Debug and test remote applications deployed directly from your IDE to OpenShift. No more having to exit your IDE to push your application.</p>
+                                <p className='section__header-hint sticky-section-hint'>Allows to browse the catalog and discover <b>Helm Charts</b> and install them on the connected cluster.</p>
                             </div>
                             <div className='sticky-section-exten'>
-                                <p className='section__header-hint sticky-section-hint'>Allows to connect &#38; <p className='highlight'>provision free OpenShift cluster</p> from IDE, using a guided workflow. This workflow allows you to either Run OpenShift locally or provision a free 30 days Developer Sandbox.</p>
+                                <p className='section__header-hint sticky-section-hint'>Allows to connect &#38; <b>provision free OpenShift cluster</b> from IDE, using a guided workflow. This workflow allows you to either Run OpenShift locally or provision a free 30 days Developer Sandbox.</p>
                             </div>
                             <div className='sticky-section-exten'>
-                                <p className='section__header-hint sticky-section-hint'>Allows Monitoring through view and stream logs from your deployments, pods and containers for Kubernetes resources, with One Click from IDE.
+                                <p className='section__header-hint sticky-section-hint'>Allows Monitoring through <b>view and stream logs</b> from your deployments, pods and containers for Kubernetes resources, with One Click from IDE.
                                 </p>
                             </div>
                         </section>