responsiveness issue resolved on home page

frontend/angular/src/app/my-career-web/dashboard/home/home.component.html

@@ -7,23 +7,23 @@
             <span *ngIf="!careerProfile?.Candidate?.IsFirstTime">Hi {{careerProfile?.Candidate?.User?.FirstName | truncate : 10}}, Welcome back.</span>
         </div>
 
-        <div class="home-header-card">
+    </div>
+    <div class="home-body">
+
+        <div class="home-body-card">
 
-            <div class="home-header-card-content">
+            <div class="home-body-card-content">
                 <span *ngIf="!careerProfile?.Candidate?.IsFirstTime">We need you to fill out your Career Profile so you can apply to the jobs that you’ve been matched to below.</span>
                 <span *ngIf="careerProfile?.Candidate?.IsFirstTime">We need some information from you so you can fill out your career profile and get job hunting.</span>
             </div>
 
-            <div class="home-header-card-action" [routerLink]="activeSection?.link">
+            <div class="home-body-card-action" [routerLink]="activeSection?.link">
                 <span *ngIf="careerProfile?.Candidate?.IsFirstTime">I'm ready to get started</span>
                 <span *ngIf="!careerProfile?.Candidate?.IsFirstTime">Get Started</span>
             </div>
 
         </div>
 
-    </div>
-    <div class="home-body">
-
 <!--        <div class="home-body-heading">-->
 <!--            Get to know yourself-->
 <!--        </div>-->
@@ -94,7 +94,7 @@
                 <span *ngIf="!careerProfile?.Candidate?.IsFirstTime">We need you to fill out your Career Profile so you can apply to the jobs that you’ve been matched to below.</span>
                 <span *ngIf="careerProfile?.Candidate?.IsFirstTime">We need some information from you so you can fill out your career profile and get job hunting.</span>
 
-                <div class="mobile-header-card-action" [routerLink]="activeSection.link">
+                <div class="mobile-header-card-action" [routerLink]="activeSection?.link">
                     <span *ngIf="careerProfile?.Candidate?.IsFirstTime">I'm ready to get started</span>
                     <span *ngIf="!careerProfile?.Candidate?.IsFirstTime">Get Started</span>
                 </div>

frontend/angular/src/app/my-career-web/dashboard/home/home.component.scss

@@ -18,14 +18,19 @@
             text-overflow: ellipsis;
             overflow: hidden;
         }
+    }
+
+
+    .home-body {
+        padding: 0 10%;
+        position: relative;
 
         &-card {
-            height: 100px;
             border-radius: 4px;
             background-color: #FFFFFF;
             box-shadow: 0 0 20px 0 rgba(128,130,133,0.13);
-            padding: 23px 26px;
-            margin-top: 24px;
+            padding: 24px;
+            margin-top: -33px;
             display: flex;
             justify-content: space-between;
             align-items: center;
@@ -36,7 +41,6 @@
                 font-size: 18px;
                 letter-spacing: 0;
                 line-height: 27px;
-                width: 500px;
             }
 
             &-action {
@@ -54,18 +58,13 @@
                 white-space: nowrap;
             }
         }
-    }
-
-
-    .home-body {
-        padding: 100px 10% 0;
 
         &-heading {
             color: #58595B;
             font-family: $headingFont;
             font-size: 18px;
             font-weight: bold;
-            margin-bottom: 24px;
+            margin: 32px 0 24px;
         }
 
         &-extra-features {
@@ -141,6 +140,29 @@
     }
 }
 
+@media (max-width: 1024px) {
+    .home-wrapper {
+
+        .home-body-card {
+            display: block;
+
+            &-action {
+                margin-top: 16px;
+                margin-left: 0;
+            }
+        }
+
+        .home-body-extra-features {
+            display: block;
+
+            .extra-feature {
+                margin-bottom: 24px;
+                margin-right: 0 !important;
+            }
+        }
+    }
+}
+