app is responsive and stores data via localStorage

src/app/horoscope-data-container/horoscope-data-container.component.html

@@ -9,4 +9,4 @@
     <app-horoscope [horoscopeData]="horoscopeData1" (newSignEvent) = "changeGender"
     >
     </app-horoscope>
-  </body>
+</body>

src/app/nav-bar/nav-bar.component.css

@@ -25,5 +25,12 @@ ul {
   }
 
   .nav-bar {
-    width: 800px;
+    max-width: 800px; 
+    margin: 0 auto;
+  }
+ 
+  @media (max-width: 768px) {
+    .nav-bar {
+      width: 90vw;
+    }
   }

src/app/numerology/numerology.component.css

@@ -1,5 +1,5 @@
 .container-numerology {
-    width: 600px;
+    max-width: 768px;
     height: 78vh;
     background-color: var(--green-2);
     border-radius: 20px;
@@ -10,6 +10,7 @@
     margin-top: 0.5em;
     flex-direction: column;
 }
+
 .upper-num {
     position: relative;
     overflow: hidden;
@@ -69,4 +70,14 @@
     align-items: center;
     justify-content: center;
     text-align: center
-}
+}
+@media screen and (max-width: 768px) {
+    body {
+      font-size: 14px; 
+    }
+
+    .container-numerology {
+        width: 90vw;
+      }
+
+}

src/app/numerology/numerology.component.ts

@@ -9,18 +9,21 @@ import { NumerologyData } from '../models/numerology.model';
 })
 export class NumerologyComponent implements OnInit{
 
-  public number: string = '7'
+  public number!: string
   public numerologyData?: NumerologyData
   errormessage: any
 
   constructor (private openNumerologyService: OpenNumerologyService) {}
 
   ngOnInit(): void {
+    this.number = localStorage.getItem('number') || '7';
     this.getNumerology();
     this.number= '';
+
   }
 
   onSubmitNumber() {
+    localStorage.setItem('number', this.number);
     this.getNumerology();
     this.number = '';
   }

src/styles.css

@@ -44,7 +44,7 @@ body {
     background-color: var(--green-2);
     border-radius: 20px;
     box-shadow: 10px 10px 10px var(--shadow-dark);
-    margin: 1em;
+    margin: 1em auto;
     margin-top: 0.5em;
 }
 .if-no-error{
@@ -223,3 +223,25 @@ body {
     margin-right: 10%;
     text-align: center;
 }
+
+@media screen and (max-width: 768px) {
+    body {
+      font-size: 12px; 
+    }
+  
+    .container {
+      width: 90%;
+      margin: 0.5em; 
+    }
+  
+    .first-column,
+    .second-column {
+      width: 100%;
+    }
+  
+    .upper-data img {
+      border-top-left-radius: 0; 
+      border-top-right-radius: 0;
+    }
+  
+  }