update frontpage

footer.php

@@ -7,9 +7,7 @@
 
 
 <footer class="container-fluid w-100 bg-1">
-<?php
-    wp_nav_menu(array('menu' => 'footer', 'menu_id'=>'footermenu', 'menu_container' => false));
-?>
+
 </footer>
 
 

front-page.php

@@ -8,6 +8,12 @@
         </div>
     </div>
 
+    <div class="row">
+        <div class="col-12">
+            <?php get_template_part('template-parts/posts/about'); ?>
+        </div>
+    </div>
+
 </div>
 
 

scss/includes/_content.scss

@@ -4,12 +4,38 @@
     padding: 25px;
     grid-template-columns: repeat(3, 1fr );
     padding-top: 40px;
+    @media (max-width: 1100px) {
+        grid-template-columns: repeat(2, 1fr );
+    }
+    @media (max-width: 768px) {
+        grid-template-columns: repeat(1, 1fr );
+    }
 
     .single-post {
         min-height: 100px;
         box-shadow: 0 33px 36px 0 rgba(93, 108, 123, 0.08);
         background-color: #fff;
         margin-right: 20px;
         margin-bottom: 20px;
+        &:nth-child(3n) {
+            margin-right: 0;
+        }
+        @media (max-width: 1100px) {
+
+            margin-right: 0;
+            &:nth-child(1n) {
+                margin-right: 20px;
+            }
+            &:nth-child(2n) {
+                margin-right: 0;
+            }
+        }
+        @media (max-width: 768px) {
+            margin-right: 0 !important;
+        }
     }
+}
+
+#about-banner{
+    min-height:100px;  box-shadow: 0 33px 36px 0 rgba(93, 108, 123, 0.08);
 }

scss/styles.css

@@ -143,10 +143,44 @@ body header .contact .clock:before {
   grid-template-columns: repeat(3, 1fr);
   padding-top: 40px;
 }
+@media (max-width: 1100px) {
+  .posts-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+@media (max-width: 768px) {
+  .posts-grid {
+    grid-template-columns: repeat(1, 1fr);
+  }
+}
 .posts-grid .single-post {
   min-height: 100px;
   box-shadow: 0 33px 36px 0 rgba(93, 108, 123, 0.08);
   background-color: #fff;
   margin-right: 20px;
   margin-bottom: 20px;
+}
+.posts-grid .single-post:nth-child(3n) {
+  margin-right: 0;
+}
+@media (max-width: 1100px) {
+  .posts-grid .single-post {
+    margin-right: 0;
+  }
+  .posts-grid .single-post:nth-child(1n) {
+    margin-right: 20px;
+  }
+  .posts-grid .single-post:nth-child(2n) {
+    margin-right: 0;
+  }
+}
+@media (max-width: 768px) {
+  .posts-grid .single-post {
+    margin-right: 0 !important;
+  }
+}
+
+#about-banner {
+  min-height: 100px;
+  box-shadow: 0 33px 36px 0 rgba(93, 108, 123, 0.08);
 }

template-parts/posts/about.php

@@ -0,0 +1 @@
+<div class="w-100 bg-white mt-5" id="about-banner"></div>

template-parts/posts/postgrid.php

@@ -1,7 +1,7 @@
-<h1 class="text-center m-5">Das Fahrzeugzentrum Olpe ist Ihr Spezialist rund um
+<h1 class="text-center m-5 p-5">Das Fahrzeugzentrum Olpe ist Ihr Spezialist rund um
 Fahrzeuge, Felgenreparaturen, Fahrzeugaufbereitung, Beschichtungen, Service und vieles mehr.</h1> 
 
-<div class="posts-grid">
+<div class="posts-grid p-0 w-100">
 
         <div class="single-post">