fix: responsiveness of some screens

src/app/components/about-me/about-me.component.html

 <div class="wholeScreen">
     <app-header></app-header>
     <div class="restOfScreen">
-        <div class="imgDiv">
           <img id="portrait" src="../../../assets/portrait_of_raphael.webp" alt="Portrait of Raphaël Schreiber">
-        </div>
         <div class="infoDiv">
             <p>{{ "firstOfAboutMe" | translate }}</p>
             <p>{{ "secondOfAboutMe" | translate }}</p>

src/app/components/about-me/about-me.component.scss

@@ -4,20 +4,14 @@
   align-items: center;
   flex-direction: row;
 
-  .imgDiv {
-    width: 25%;
-    height: 70%;
-    border-radius: 12px;
-    border: 2px solid black;
-    background-color: rgba(0, 0, 0, 0.43);
+
 
     #portrait {
-      width: 100%;
-      height: 100%;
+      width: 25%;
       border-radius: 12px;
+      border: 2px black solid;
       box-sizing: border-box;
     }
-  }
 
   .infoDiv {
     display: flex;
@@ -40,22 +34,44 @@
     }
   }
 }
-@media (max-width: 450px) and (min-width: 200px) {
+@media (max-width: 600px) and (min-width: 200px) {
+  .wholeScreen{
+    height: 120vh!important;
+  }
   .restOfScreen {
     flex-direction: column;
     justify-content: space-around;
     align-items: center;
 
-    .imgDiv{
-      width: 80%;
+    #portrait{
       height: 50%;
+      width: auto;
     }
 
     .infoDiv{
       margin-top: 5%;
-      height: 70% !important;
+      height: 50% !important;
       width: 90%;
       margin-bottom: 5%;
     }
   }
 }
+@media (min-width: 601px) and (max-width: 1100px) {
+  .restOfScreen {
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+
+    #portrait{
+      height: 50%;
+      width: auto;
+    }
+
+    .infoDiv{
+      margin-top: 5%;
+      height: 40% !important;
+      width: 80%;
+      margin-bottom: 5%;
+    }
+  }
+}

src/app/components/contact/contact.component.html

@@ -38,7 +38,7 @@
           </mat-form-field>
         </div>
         <div class="buttonDiv">
-          <!--<button mat-flat-button type="submit" class="button">Send</button>-->
+          <button mat-flat-button type="submit" class="button">Send</button>
         </div>
       </form>
     </div>

src/app/components/contact/contact.component.scss

@@ -6,7 +6,7 @@
 
   .formDiv{
     margin-left: 5%;
-    height: 70%;
+    height: 50%;
     width: 30%;
     display: flex;
     justify-content: center;
@@ -66,7 +66,6 @@
   .imageDiv{
     margin-right: 5%;
     width: 50%;
-    height: 70%;
     box-sizing: border-box;
     background-color: rgba(0, 0, 0, 0.53);
     border-radius: 12px;
@@ -79,7 +78,10 @@
     }
   }
 }
-@media (max-width: 450px) and (min-width: 200px) {
+@media (max-width: 600px) and (min-width: 200px) {
+  .wholeScreen{
+    height: 120vh !important;
+  }
   .restOfScreen {
     flex-direction: column-reverse;
     justify-content: space-around;
@@ -98,3 +100,26 @@
     }
   }
 }
+@media (max-width: 1100px) and (min-width: 601px) {
+  .wholeScreen{
+    height: 120vh !important;
+  }
+  .restOfScreen {
+    flex-direction: column-reverse;
+    justify-content: space-around;
+    align-items: center;
+
+    .imageDiv{
+      width: 70%;
+      margin: 0;
+    }
+
+    .formDiv{
+      margin-top: 5%;
+      margin-bottom: 5%;
+      margin-left: 0;
+      width: 90%;
+      height: 40%;
+    }
+  }
+}

src/app/components/global/background/background.component.scss

 #circleContainer {
-  width: 100vw;
-  height: 100vh;
+  width: 100%;
+  height: 100%;
   background-color: #000000;
   font-family: Helvetica, serif;
   z-index: 0;
@@ -11,7 +11,7 @@
 .background-image {
   width: 100%;
   height: 100%;
-  object-fit: cover; /* Passt das Bild an, um es vollständig zu zeigen, ohne Verzerrung */
+  object-fit: cover;
   position: absolute;
   top: 0;
   left: 0;

src/app/components/global/footer/footer.component.scss

@@ -18,7 +18,7 @@ div{
         font-size: 35px;
     }
 }
-@media (max-width: 450px) and (min-width: 200px) {
+@media (max-width: 600px) and (min-width: 200px) {
   div{
     height: 7%;
   }