- scss styling

src/assets/scss/main-styles.scss

@@ -114,6 +114,13 @@ $table-striped-row-even-hover-background-color: #ecf2fa;
     height: 100% !important;
 }
 
+@media only screen and (min-width: 1408px) {
+    .header-image {
+      background-image: url("../site/img/Main-banner-homepage-2560x.jpg");
+      min-height: 700px;
+    }
+  }
+
 /* =Section general styling
 -------- */
 // section {
@@ -249,30 +256,30 @@ body {
     display: none;
 }
 
-// .animate_content {
-//     animation: animate 3s ease;
-// }
+.animate_content {
+    animation: animate 3s ease;
+}
 
-// @keyframes animate {
-//     10% {
-//         transform: scale(1, 0.004);
-//     }
-//     35% {
-//         transform: scale(0.001, 0.004);
-//         opacity: 1;
-//     }
-//     50% {
-//         transform: scale(0.001, 0.004);
-//         opacity: 0;
-//     }
-//     85% {
-//         transform: scale(1, 0.004);
-//         opacity: 1;
-//     }
-//     100% {
-//         transform: scale(1, 1);
-//     }
-// }
+@keyframes animate {
+    10% {
+        transform: scale(1, 0.004);
+    }
+    35% {
+        transform: scale(0.001, 0.004);
+        opacity: 1;
+    }
+    50% {
+        transform: scale(0.001, 0.004);
+        opacity: 0;
+    }
+    85% {
+        transform: scale(1, 0.004);
+        opacity: 1;
+    }
+    100% {
+        transform: scale(1, 1);
+    }
+}
 
 .page_description {
     font-weight: 300;
@@ -434,3 +441,29 @@ body {
 .work-items div:hover .work-front {
     display: none;
 }
+
+
+
+@media only screen and (max-width: 580px) {
+    .mobile-space {
+      margin-top: 2em;
+    }
+    .page-breaker {
+      padding: 0;
+    }
+    footer .card {
+      margin-bottom: 2em;
+    }
+    .overlay-boxes {
+      margin-bottom: 1em;
+    }
+    .super-card {
+      margin-bottom: 1em;
+    }
+    .partner-logos {
+      padding: 0;
+    }
+    .search-box {
+      width: auto;
+    }
+  }

src/views/home-view/home-view-component.vue

@@ -96,7 +96,7 @@
                 </div>
             </section>
 
-            <section class="section">
+            <div>
                 <div class="column is-full text-center">
                     <h1>TETHYS SERVICES</h1>
                     <p class="lead">Eine Übersicht unserer Dienstleistungen</p>
@@ -157,7 +157,7 @@
                         </div>
                     </div>
                 </div>
-            </section>
+            </div>
         </div>
 
         <div class="clearfix mt-3"></div>

src/views/search-view/search-view-component.vue

@@ -1,6 +1,6 @@
 <template>
     <div id="page_style" class="rows site-content page__style page__description" autocomplete="off">
-        <div class="container-fluid page-breaker mz-5">
+        <div class="container-fluid banner mz-5">
             <vs-input v-on:search-change="onSearch" v-bind:propDisplay="searchTerm" v-bind:placeholder="'Enter your search term...'"></vs-input>
         </div>
         <div class="column is-half is-offset-one-quarter" style="padding-top: 0; margin-top: 0">
@@ -143,7 +143,7 @@ export default SearchViewComponent;
 </script>
 
 <style scoped>
-.page-breaker {
+.banner {
     background-image: url(./../../assets/site/img/main-search-banner.jpg);
     background-size: cover;
     background-position-x: center;
@@ -151,9 +151,21 @@ export default SearchViewComponent;
     background-repeat: no-repeat;
     padding: 6.2em;
     min-height: 400px;
+    width: 100%;
+    /* display: flex;
+    flex-direction: column; */
+    justify-content: center;
+    align-items: center;
 }
 
 .mz-5 {
     margin-bottom: 1.5 rem;
 }
+
+@media (max-width: 576px) {
+    .banner {
+        align-items: flex-start;
+        height: 400px;
+    }
+}
 </style>

src/views/services-view/service-view-component.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="container">
-        <section class="section">
+        <div>
             <div class="column is-full text-center">
                 <h1>TETHYS SERVICES</h1>
                 <p class="lead">Eine Übersicht unserer Dienstleistungen</p>
@@ -61,7 +61,7 @@
                     </div>
                 </div>
             </div>
-        </section>
+        </div>
     </div>
 </template>