From 4e2fc07b7882d7b4533a42f5efcadb2f826815cd Mon Sep 17 00:00:00 2001
From: SitecoreAdmin <SitecoreAdmin@RSMDocker-VM>
Date: Tue, 1 Aug 2023 11:57:13 +0000
Subject: [PATCH] fix() : Promo RV Responsive CSS

---
 .../promo/_promo-image-on-left.scss           | 20 ++++++++++++++++---
 .../promo/_promo-rounded-image.scss           | 16 ++++++++++++---
 .../assets/sass/variants/banner/default.scss  |  2 +-
 .../assets/sass/variants/promo/BasicCard.scss | 14 +++++++------
 .../components/Espire/PageContent/Banner.tsx  |  2 +-
 src/sxastarter/src/components/Promo.tsx       |  6 +++---
 6 files changed, 43 insertions(+), 17 deletions(-)

diff --git a/src/sxastarter/src/assets/sass/components/promo/_promo-image-on-left.scss b/src/sxastarter/src/assets/sass/components/promo/_promo-image-on-left.scss
index 119697281..c21199ce2 100644
--- a/src/sxastarter/src/assets/sass/components/promo/_promo-image-on-left.scss
+++ b/src/sxastarter/src/assets/sass/components/promo/_promo-image-on-left.scss
@@ -1,10 +1,24 @@
 .image-left {
+
+  .card-wrapper {
+    flex-direction: row-reverse;
+  }
   @include respond-to(mobile-to-tablet) {
-    .text-section {
+    .card-wrapper {
       flex-direction: column-reverse;
     }
   }
-  .text-section {
-    flex-direction: row-reverse;
+  
+  &.rounded-image {
+    @include respond-to(tablet-and-above){
+    .image-section {
+      margin-right: 3rem;
+      margin-left: 0;
+    }
+    .text-section {
+      padding-left: 3rem;
+      padding-right: 0;
+    }
+  }
   }
 }
diff --git a/src/sxastarter/src/assets/sass/components/promo/_promo-rounded-image.scss b/src/sxastarter/src/assets/sass/components/promo/_promo-rounded-image.scss
index 8997de1bc..d90bb9cd8 100644
--- a/src/sxastarter/src/assets/sass/components/promo/_promo-rounded-image.scss
+++ b/src/sxastarter/src/assets/sass/components/promo/_promo-rounded-image.scss
@@ -10,14 +10,20 @@
     align-items: center;
     justify-content: center;
     padding: 2rem;
+    margin-left: 3rem;
     img {
       border-radius: 50%;
       object-fit: unset;
     }
+    @include respond-to(mobile-to-tablet) {
+      max-width: 250px !important;
+      min-width: 250px;
+      max-height: 250px;
+      min-height: 250px;
+      margin: 0 auto 2rem auto;
+    }
   }
 
-  
-
   @include respond-to(tablet-and-above) {
     .row-cols-1 > * {
       flex: 1;
@@ -34,7 +40,7 @@
     }
   }
 
-  .text-section {
+  .card-wrapper {
     margin: 0;
 
     .card-details {
@@ -45,4 +51,8 @@
   .section-inner-space {
     padding: 0;
   }
+
+  .text-section {
+    padding-right: 3rem;
+  }
 }
diff --git a/src/sxastarter/src/assets/sass/variants/banner/default.scss b/src/sxastarter/src/assets/sass/variants/banner/default.scss
index 1ef03c092..ec12842a7 100644
--- a/src/sxastarter/src/assets/sass/variants/banner/default.scss
+++ b/src/sxastarter/src/assets/sass/variants/banner/default.scss
@@ -103,7 +103,7 @@
 
     .container {
       margin: 0 0 0 2rem;
-      @include respond-to(laptop-and-above){
+    @include respond-to(laptop-and-above){
         max-width: 720px;
       }
     }
diff --git a/src/sxastarter/src/assets/sass/variants/promo/BasicCard.scss b/src/sxastarter/src/assets/sass/variants/promo/BasicCard.scss
index 4d57156d2..a251ef352 100644
--- a/src/sxastarter/src/assets/sass/variants/promo/BasicCard.scss
+++ b/src/sxastarter/src/assets/sass/variants/promo/BasicCard.scss
@@ -9,13 +9,15 @@
   }
 
   img {
-    width: 100%;
-    object-fit: contain;
+    max-width: 100%;
   }
-  .ps-md-5 {
-    @include respond-to(tablet-and-above) {
-      padding-left: 0 !important;
-      padding-right: 3rem !important ;
+
+  .card-wrapper {
+    margin: 0;
+  }
+  .card-details {
+    @include respond-to(mobile-to-tablet) {
+      padding-bottom: 10px;
     }
   }
 }
diff --git a/src/sxastarter/src/components/Espire/PageContent/Banner.tsx b/src/sxastarter/src/components/Espire/PageContent/Banner.tsx
index 38902bfbc..392e0baec 100644
--- a/src/sxastarter/src/components/Espire/PageContent/Banner.tsx
+++ b/src/sxastarter/src/components/Espire/PageContent/Banner.tsx
@@ -15,7 +15,7 @@ export const Banner = (props: BannerTemplateProps): JSX.Element => {
   return (
     <div className={`banner ${props.params.styles}`}>
       <section className={`banner-default`}>
-        <JssImage field={props?.fields?.Image} />
+        <JssImage field={props?.fields?.Image} width={''} height={''} />
         <div className="container">
           <div className="banner-content">
             <Text tag="h1" field={props?.fields?.Title} />
diff --git a/src/sxastarter/src/components/Promo.tsx b/src/sxastarter/src/components/Promo.tsx
index 0b9ee7058..8e4a1b399 100644
--- a/src/sxastarter/src/components/Promo.tsx
+++ b/src/sxastarter/src/components/Promo.tsx
@@ -94,8 +94,8 @@ export const BasicCard = (props: PromoProps): JSX.Element => {
         id={id ? id : undefined}
       >
         <section className="section-inner-space">
-          <div className="row align-items-center row-cols-1 row-cols-md-2 gx-5 text-center text-md-start text-section">
-            <div className="col">
+          <div className="row align-items-center row-cols-1 row-cols-md-2 gx-5 text-center text-md-start card-wrapper">
+            <div className="col text-section">
               <RichText className="mb-4" field={props?.fields?.PromoText} tag="h2" />
               <RichText
                 className="text-align-justify card-details"
@@ -103,7 +103,7 @@ export const BasicCard = (props: PromoProps): JSX.Element => {
               />
             </div>
             <div className="col ps-md-5 image-section">
-              <JssImage field={props.fields.PromoIcon} />
+              <JssImage field={props.fields.PromoIcon} height={' '} width={' '} />
             </div>
           </div>
         </section>