feature: immo

src/app/(home)/pfarrei/immobilienentwicklung/page.tsx

@@ -14,7 +14,7 @@ export default function Page() {
         <Title title={'Immobilienentwicklung in der Pfarrei Hl. Drei Könige'} />
 
         <div className={styles.container}>
-          <div className={styles.paddLeft}>
+          <div>
             <h3>Warum das Ganze?</h3>
 
             <p>
@@ -53,7 +53,7 @@ export default function Page() {
               </a>)
             </p>
           </div>
-          <div>
+          <div className={styles.events}>
             <GroupEvents id={"967f8a7f-38bf-404e-b7b7-ac8f14601193"} />
           </div>
         </div>
@@ -215,6 +215,8 @@ export default function Page() {
         </div>
 
         <h4>Ergebnisse der Begleitung durch ARGE LiBaSt</h4>
+
+        <div className={styles.tableDiv}>
           <table className={styles.table}>
             <thead className={styles.borderRow}>
             <tr className={styles.borderRow}>
@@ -310,6 +312,7 @@ export default function Page() {
             </tr>
             </tbody>
           </table>
+        </div>
 
         <h3>Fragen? Anregungen? Beteiligung?</h3>
 

src/app/(home)/pfarrei/immobilienentwicklung/styles.module.scss

@@ -16,8 +16,8 @@
   border-radius: 10px;
 }
 
-.paddLeft {
-  padding-right: 200px;
+.events {
+  min-width: 450px;
 }
 
 .list {
@@ -43,19 +43,23 @@
 }
 
 .quote {
-  padding-top: 30px;
-  padding-bottom: 30px;
+  padding: 50px 0;
   background-color: $shade3;
   text-align: center;
   color: $base-color;
   font-size: 22px;
-  margin-bottom: 160px;
+  margin-bottom: 100px;
 }
 
 .small {
   font-size: 14px;
 }
 
+.tableDiv {
+  width: 100%;
+  overflow: auto;
+}
+
 .table {
   margin-bottom: 120px;
   width: 100%;
@@ -76,3 +80,19 @@
   border-bottom: 1px solid;
 
 }
+
+@media screen and (max-width: 576px) {
+  .container {
+    display: block;
+  }
+
+  .list {
+    padding-right: 20px;
+  }
+
+  .events {
+    margin-top: 40px;
+    min-width: inherit;
+    width: 100%;
+  }
+}