Adding mobile layout

src/app/app.component.html

@@ -15,6 +15,7 @@
 </div>
 </div>
 <div class="wrapper" id="diensten">
+  <img src="assets/b-images/invoice.png" alt="factuur">
   <div class="content">
     <h2>Diensten</h2>
     <app-collapse [icon]="'fa-book-open'" [title]="'Boekhouding/Accountancy'">
@@ -88,7 +89,6 @@
       </ul>
     </app-collapse>
   </div>
-  <img src="assets/b-images/invoice.png" alt="factuur">
 </div>
 <div class="alternate" id="advies">
 <div class="wrapper">
@@ -141,6 +141,7 @@
 </div>
 <div>
 <div class="wrapper" id="klantworden">
+  <img src="assets/b-images/customer.png" alt="klant">
   <div class="content">
     <h2>Klant worden?</h2>
     <p>
@@ -152,6 +153,7 @@
       Wij zullen u bij de overstap begeleiden, zodat de overgang vlot kan verlopen.
       Wij contacteren uw vorige raadgever om ons uw dossier te bezorgen.
     </p>
+    <img src="assets/b-images/customer.png" alt="klant">
     <h2>Hoe gaan we te werk?</h2>
     <div class="timeline">
       <div><span class="circle"></span><p>Tijdens een eerste vrijblijvende vergadering met één van de vennoten, bespreken we uw project.</p></div>
@@ -162,7 +164,6 @@
       <div><span class="circle"></span><p>Interesse? <span>Op onze <a href="#contact" alt="contact">contact pagina</a> vindt u onze contactgegevens</span></p></div>
     </div>
   </div>
-  <img src="assets/b-images/customer.png" alt="klant">
 </div>
 </div>
 <div class="hero-container2">
@@ -189,6 +190,7 @@
 </div>
 <div>
 <div class="wrapper" id="vacatures">
+  <img src="assets/b-images/vacancies.png" alt="vacatures">
   <div class="content">
     <h2>Vacatures</h2>
     <p>
@@ -218,7 +220,6 @@
       <li>of bezorg dan jouw CV en motivatiebrief aan robert@sinia.be</li>
     </ul>
   </div>
-  <img src="assets/b-images/vacancies.png" alt="vacatures">
 </div>
 </div>
 <div class="alternate" id="contact">

src/app/app.component.scss

@@ -112,6 +112,10 @@ h2 {
     margin-top: 10rem;
   }
 
+  .content img {
+    display: none;
+  }
+
   .timeline {
     border-left: 0.2rem solid $primary-color;
     padding: 1rem 3rem 2rem 3rem;
@@ -155,6 +159,7 @@ h2 {
 #vacatures, #klantworden, #diensten {
   display: flex;
   justify-content: space-between;
+  flex-direction: row-reverse;
 
   .content {
     width: 60%;
@@ -208,3 +213,174 @@ h2 {
     font-size: 2rem;
   }
 }
+
+@media only screen and (max-width: 1200px) {
+  .hero-container {
+    height: 20rem;
+
+    .hero {
+      transform: translateY(-50%) translateX(-50%) scale(0.35);
+      top: 25%;
+    }
+  }
+
+  .hero-container2 {
+    height: 20rem;
+
+    .hero2 {
+      transform: translateY(-50%) translateX(-50%) scale(0.28);
+      top: 0;
+    }
+  }
+
+  .wrapper {
+    padding: 2rem 3rem 6rem 3rem;
+  }
+
+  #diensten {
+    display: inline-block;
+
+    img {
+      position: relative;
+      width: 20.4rem;
+      height: 20rem;
+      top: -6rem;
+      left: calc(100vw - 30rem);
+      transform: scale(1.25);
+    }
+
+    .content {
+      z-index: 5;
+      position: relative;
+      width: 100%;
+      margin-top: -17rem;
+    }
+  }
+
+  #advies {
+    margin-top: 2rem;
+
+    .wrapper {
+      display: inline-block;
+
+      img {
+        position: relative;
+        width: 20.4rem;
+        height: 20rem;
+        top: -6rem;
+        left: calc(100vw - 30rem);
+        transform: scale(1.25);
+      }
+
+      .content {
+        z-index: 5;
+        position: relative;
+        width: 100%;
+        margin-top: -17rem;
+      }
+    }
+  }
+
+  #klantworden {
+    display: inline-block;
+    padding: 3rem;
+
+    img {
+      display: none;
+    }
+
+    .content {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      z-index: 5;
+      position: relative;
+      width: 100%;
+
+      h2 {
+        width: 100%;
+      }
+
+      img {
+        display: inline;
+        margin: 3rem;
+        width: 40rem;
+        height: 38rem;
+        max-width: 40rem;
+      }
+
+    }
+    .timeline {
+      div + div {
+        margin-top: 0rem;
+      }
+    }
+  }
+
+  #wiezijnwe {
+    display: inline-block;
+
+    .wrapper {
+      align-items: flex-end;
+      flex-direction: column;
+      margin-top:-6rem;
+
+      img {
+        width: 36rem;
+        max-width: 36rem;
+        height: 32rem;
+        position: relative;
+        top: -16rem;
+      }
+    }
+
+    .wrapper .content {
+      z-index: 5;
+      position: relative;
+      width: 100%;
+      margin-top: -19rem;
+    }
+  }
+
+  #vacatures {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    img {
+      width: 50rem;
+      max-width: 50rem;
+      height: 100%;
+      position: relative;
+      top: -12rem;
+    }
+
+    .content {
+      z-index: 5;
+      position: relative;
+      width: 100%;
+      margin-top: -15rem;
+    }
+  }
+
+  #contact {
+    .wrapper-contact {
+      display: inline;
+
+      .text {
+        padding: 3rem;
+        margin-bottom: 3rem;
+        width: 100%;
+      }
+
+      .google-maps {
+        padding: 3rem;
+        iframe{
+          margin: 0 auto;
+          width: calc(100vw - 6rem);
+        }
+    }
+    }
+  }
+}

src/app/header/header.component.scss

@@ -59,3 +59,12 @@
     transition: all .1s;
   }
 }
+
+@media only screen and (max-width: 1200px)  {
+  .logo .subtext {
+    display: none;
+  }
+  .menu {
+    display: none;
+  }
+}

src/index.html

@@ -17,6 +17,7 @@
   <style>
     html {
       font-size: 10px;
+      overflow-x: hidden;
     }
 
     body *{