[yoga-12] serviceList page improvements - improve css

yoga-app/src/components/block.with.left.image.component.tsx

@@ -15,11 +15,18 @@ export default function BlockWithLeftImage (  {
     return (
         <section className={clsx("block_with_left_image_section","block_with_image","block_with_left_image",styles.blockWithLeftImage)} id={id}>
             <div className="container">
-                <div className="block_with_image_box">
+                <div className="block_with_left_image_box">
                     <div className="row">
+                        { url && <div className="block_with_left_image_image d-lg-none d-md-none col-sm-12 col-xs-12">
+                            <figure className="mb-0">
+                                <YogaImageComponent src={url} alt=""
+                                                    className={clsx("img-fluid",  styles.leftImage)}/>
+                            </figure>
+                        </div>
+                        }
                         <div className="col-lg-12 col-md-12 col-sm-12 col-xs-12" data-aos="fade-up">
                             <div className={ clsx("block_with_image_content","block_with_image_content","block_with_left_image_content",styles.blockLeftblock_with_imageContent)}>
-                                {url && <div className="block_with_image_image">
+                                {url && <div className="block_with_left_image_image d-lg-block d-md-block d-sm-none d-xs-none d-none">
                                     <figure className="mb-0"><YogaImageComponent src={url} alt="" className={clsx("img-fluid", "float-left", styles.leftImage)}/></figure>
                                 </div>
                                 }

yoga-app/src/styles/block-with-left-image.scss

@@ -5,7 +5,7 @@
   padding: 45px 0 130px;
   position: relative;
 }
-.block_with_left_image .block_with_image_box{
+.block_with_left_image .block_with_left_image_box{
   width: 100%;
   background-color: var(--e-global-color-white);
   border-radius: 200px 0 200px 0;
@@ -80,6 +80,12 @@
   }
 }
 
+.block_with_left_image_image img{
+  border-top-left-radius: 200px;
+  border-bottom-right-radius: 200px;
+  margin: -150px 12px 12px -40px;
+  max-width: 50%;
+}
 
 
 
@@ -120,6 +126,11 @@
   .block_with_left_image_section .vision_left_shape {
     display: none;
   }
+
+  .block_with_left_image_image img{
+    margin-top: -80px;
+  }
+
 }
 @media screen and (max-width: 991px){
   .block_with_left_image_section {
@@ -147,6 +158,12 @@
     line-height: 18px;
     padding: 20px 35px;
   }
+
+  .block_with_left_image_image img {
+    margin-top: -40;
+    margin-left: 0;
+  }
+
 }
 
 @media screen and (max-width: 767px){
@@ -178,10 +195,15 @@
     padding: 18px 32px;
   }
 
+  .block_with_left_image_image img{
+    margin-top: 0;
+    max-width: 100%;
+  }
+
 }
 
 @media screen and (max-width: 575px) {
-  .block_with_left_image_section .block_with_image_box {
+  .block_with_left_image_section .block_with_left_image_box {
     border-radius: 118px 0 118px 0;
   }
   .block_with_left_image_content p {
@@ -193,4 +215,10 @@
     line-height: 14px;
     padding: 16px 30px;
   }
+  .block_with_left_image_image img{
+    margin-top: 0;
+    max-width: 100%;
+    //border-top-left-radius: 200px;
+    //border-bottom-right-radius: 200px;
+  }
 }

yoga-app/src/styles/block-with-right-image.scss

@@ -13,8 +13,8 @@
 
   &_image img {
     max-width: 50%;
-    border-top-left-radius: 200px;
+    border-top-left-radius: var(--y-box-border-radius);
-    border-bottom-right-radius: 200px;
+    border-bottom-right-radius: var(--y-box-border-radius);
     margin: calc(-1 * var(--y-block-with-right-image-top-spacing)) 0 12px 12px;
   }
 
@@ -120,6 +120,9 @@
 
     &_content {
       padding-left: 70px;
+      p, h2, h3, h4, h5, h6{
+        padding-right: 70px;
+      }
       h5 {
         margin-bottom: 8px;
       }
@@ -128,7 +131,6 @@
       }
       p {
         margin-bottom: 28px;
-        padding-right: 18px;
       }
     }
     &_right_shape {
@@ -147,6 +149,11 @@
     padding: 70px 0 35px;
 
     &_content {
+
+      p, h2, h3, h4, h5, h6{
+        padding-right: 45px;
+      }
+
       padding-left: 45px;
       h5 {
         margin-bottom: 5px;
@@ -156,7 +163,6 @@
       }
       p {
         margin-bottom: 22px;
-        padding-right: 0px;
       }
     }
     &_image img {
@@ -175,7 +181,8 @@
       padding-left: 0;
       text-align: center;
       margin-bottom: 30px;
-      h2 {
+      h2,h3,h4,h5,h6 {
+        padding-right: 0;
         margin-bottom: 8px;
       }
       p {
@@ -185,6 +192,7 @@
     }
     &_image img {
       margin-top: 0;
+      margin-bottom: 0;
       max-width: 100%;
     }
   }
@@ -196,6 +204,9 @@
     --y-btn-padding: 16px 30px;
 
     &_content {
+      h2,h3,h4,h5,h6{
+        padding-right: 0;
+      }
       p {
         margin-bottom: 15px;
         padding: 0 10px;
@@ -203,6 +214,7 @@
     }
     &_image img {
       margin-top: 0;
+      margin-bottom: 0;
       max-width: 100%;
     }
   }