Merge pull request #21 from ramangupta44/feature/changes

fix() : Promo RV Responsive CSS

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;
+    }
+  }
   }
 }

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;
+  }
 }

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;
       }
     }

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;
     }
   }
 }

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} />

src/sxastarter/src/components/Promo.tsx

@@ -94,16 +94,16 @@ 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"
                 field={props?.fields?.PromoText2}
               />
             </div>
             <div className="col ps-md-5 image-section">
-              <JssImage field={props.fields.PromoIcon} />
+              <JssImage field={props.fields.PromoIcon} height={' '} width={' '} />
             </div>
           </div>
         </section>