Mobile layout fixes

src/app/app.component.html

@@ -23,7 +23,7 @@
   <img src="assets/b-images/invoice.png" alt="factuur">
   <div class="content">
     <h2>Diensten</h2>
-    <app-collapse [icon]="'fa-book-open'" [title]="'Boekhouding/Accountancy'">
+    <app-collapse [icon]="'fa-book-open'" [title]="'Boekhouding / Accountancy'">
       <ul>
         <li>Het voeren van de boekhouding van A tot Z (met inbegrip van alle BTW verplichtingen)</li>
         <li>Wij bezorgen u geregeld (of op verzoek) een tussentijds resultaat zodat onder meer voorafbetalingen van belasting optimaal kunnen opgevolgd worden</li>

src/app/app.component.scss

@@ -260,6 +260,7 @@ h2 {
 
   .wrapper {
     padding: 2rem 3rem 6rem 3rem;
+    width: calc(100% - 6rem);
   }
 
   #diensten {
@@ -270,7 +271,7 @@ h2 {
       width: 20.4rem;
       height: 20rem;
       top: -6rem;
-      left: calc(100vw - 30rem);
+      left: calc(100vw - 22rem);
       transform: scale(1.25);
     }
 
@@ -290,10 +291,10 @@ h2 {
 
       img {
         position: relative;
-        width: 20.4rem;
+        width: 22rem;
         height: 20rem;
         top: -6rem;
-        left: calc(100vw - 30rem);
+        left: calc(100vw - 22rem);
         transform: scale(1.25);
       }
 
@@ -329,10 +330,10 @@ h2 {
 
       img {
         display: inline;
-        margin: 3rem;
+        margin: 3rem 0;
-        width: 40rem;
+        width: 33rem;
-        height: 38rem;
+        height: 34rem;
-        max-width: 40rem;
+        max-width: 33rem;
       }
 
     }
@@ -345,6 +346,7 @@ h2 {
 
   #wiezijnwe {
     display: inline-block;
+    width: 100vw;
 
     .wrapper {
       align-items: flex-end;
@@ -374,8 +376,8 @@ h2 {
     align-items: center;
 
     img {
-      width: 50rem;
+      width: 42rem;
-      max-width: 50rem;
+      max-width: 42rem;
       height: 100%;
       position: relative;
       top: -12rem;
@@ -397,6 +399,7 @@ h2 {
         padding: 3rem;
         margin-bottom: 3rem;
         width: 100%;
+        box-sizing: border-box;
       }
 
       .google-maps {

src/app/collapse/collapse.component.scss

@@ -51,7 +51,7 @@ span {
 }
 
 .collapse {
-  max-height: 130rem;
+  max-height: 180rem;
   transition: max-height 0.5s ease-in;
   overflow: hidden;
 }
@@ -69,3 +69,9 @@ span {
   padding: 0.5rem 8%;
   margin-bottom: 2rem;
 }
+
+@media only screen and (max-width: 1200px) {
+  h3 {
+    max-width: calc(100% - 10rem);
+  }
+}

src/app/header/header.component.html

@@ -6,7 +6,7 @@
   </div>
 </div>
 
-<div class="menu" [ngClass]="{'hidden': !isCollapsed}">
+<div class="menu" [ngClass]="{'collapsed': isCollapsed}">
   <a href="#diensten">Diensten<span>Diensten</span></a>
   <a href="#advies">Advies<span>Advies</span></a>
   <a href="#klantworden">Klant worden<span>Klant worden</span></a>

src/app/header/header.component.scss

@@ -76,10 +76,19 @@
     flex-direction: column;
     align-items: flex-start;
     position: absolute;
-    width: 35%;
+    width: 45%;
     right: 0;
     top: 11rem;
     z-index: 200;
+    max-height: 0;
+    transition: max-height 0.5s ease;
+    overflow: hidden;
+
+    &.collapsed {
+      max-height: 50rem;
+      transition: max-height 0.5s ease;
+      overflow: hidden;
+    }
 
     a {
       width: 100%;
@@ -103,7 +112,3 @@
     }
   }
 }
-
-.hidden {
-  display: none;
-}

src/index.html

@@ -30,6 +30,8 @@
       margin: 0 auto;
       max-width: 192rem;
       margin: 0 auto;
+      position: relative;
+      overflow-x: hidden;
     }
   </style>
 </head>