minor update

public/css/style.css

@@ -413,4 +413,16 @@ p {
     padding-left: 20px;
     margin-left:10px;
   }
+  .profile-img {
+    height: 150px;
+    width: 150px;
+    margin: auto;
+    overflow: hidden;
+  }
+  .profile-img img{
+    height: 150px;
+    width: 150px;
+    object-fit: cover;
+    object-position: top;
+  }
 }

resources/views/app/index.blade.php

@@ -118,11 +118,18 @@
         <div class="col-xl-4 col-lg-3 col-md-4 ps-0 d-md-block d-none doc-bg" style="background-image:url('{{asset('img/ph-1.png')}}')">
         </div>
         <div class="col-xl-8 col-lg-9 col-md-8 p-4">
-          <div class="d-flex mt-3 align-items-center">
-            <h4 class="m-0 font-weight-bold">Dr. Nayan Shah</h4>
-            <a href="#" class="ms-2"><img src="{{asset('img/linkedin_ic.svg')}}" alt=""> </a>
+          <div class="d-md-none d-block">
+            <div class="profile-img">
+              <img src="{{asset('/img/ph-1.png')}}" alt="">
+            </div>
+          </div>
+          <div class="text-md-start text-center">
+            <div class="d-flex mt-3 align-items-center justify-content-md-start justify-content-center">
+              <h4 class="m-0 font-weight-bold">Dr. Nayan Shah</h4>
+              <a href="#" class="ms-2"><img src="{{asset('img/linkedin_ic.svg')}}" alt=""> </a>
+            </div>
+            <h6 class="opacity-50 mt-2 mb-3">Maryland, USA</h6>
           </div>
-          <h6 class="opacity-50 mt-2 mb-3">Maryland, USA</h6>
           <p>"Best treatment option with least possible complications compared to other  treatments. This is a placeholder explaining who is our ideal client & stomer and who we prefer to work with such as medical clinics and etc! Best treatment option with least possible!"</p>
           <div class="d-flex justify-content-between pe-4">
             <img src="{{asset('img/ph-1-sign.svg')}}" alt="">
@@ -136,11 +143,18 @@
         <div class="col-xl-4 col-lg-3 col-md-4 ps-0 d-md-block d-none doc-bg" style="background-image:url('{{asset('img/ph-2.png')}}')">
         </div>
         <div class="col-xl-8 col-lg-9 col-md-8 p-4">
-          <div class="d-flex mt-3 align-items-center">
-            <h4 class="m-0 font-weight-bold">Dr. Nayan Shah</h4>
-            <a href="#" class="ms-2"><img src="{{asset('img/linkedin_ic.svg')}}" alt=""> </a>
+          <div class="d-md-none d-block">
+            <div class="profile-img">
+              <img src="{{asset('/img/ph-2.png')}}" alt="">
+            </div>
+          </div>
+          <div class="text-md-start text-center">
+            <div class="d-flex mt-3 align-items-center justify-content-md-start justify-content-center">
+              <h4 class="m-0 font-weight-bold">Dr. Nayan Shah</h4>
+              <a href="#" class="ms-2"><img src="{{asset('img/linkedin_ic.svg')}}" alt=""> </a>
+            </div>
+            <h6 class="opacity-50 mt-2 mb-3">Maryland, USA</h6>
           </div>
-          <h6 class="opacity-50 mt-2 mb-3">Maryland, USA</h6>
           <p>"Best treatment option with least possible complications compared to other  treatments. This is a placeholder explaining who is our ideal client & stomer and who we prefer to work with such as medical clinics and etc! Best treatment option with least possible!"</p>
           <div class="d-flex justify-content-between pe-4">
             <img src="{{asset('img/ph-2-sign.svg')}}" alt="">