Fix für Breite und Position der Buttons

gfi-ihk-2024/stories/components/participation-teaser/participation-teaser.scss

@@ -13,7 +13,8 @@
   transition: 0.25s ease;
   text-decoration: none;
   font-size: var(--font-size-small);
-
+  flex-flow: column;
+  justify-content: space-between;
   @media(max-width: 999px) {
     padding: 14px;
   }
@@ -26,22 +27,26 @@
 
   &::before {
     content: "";
-    position: relative;
+    position: absolute;
     display: block;
-    height: 80px;
+    height: 70px;
     background-color: var(--theme-color-primary);
-    margin: -24px -24px 10px;
+    margin: 0 -24px 10px;
     background-image: url('./topic-meinung.svg');
     background-repeat: no-repeat;
     background-position: center 65%;
     background-size: 60px;
-
+    top: 0;
+    left: 0;
+    right: 0;
     @media(max-width: 567px) {
       font-size: 50px;
-      margin-top: -14px;
+      margin-top: 0px;
     }
   }
-
+  .text-box {
+    padding-top: 66px;
+  }
   .like-h4, p, .buttons {
     margin: 0.5em 0;
   }
@@ -50,10 +55,19 @@
     display: flex;
     justify-content: space-between;
     padding-top: 0.4em;
-
+    @media screen and (max-width:1200px){
+      flex-wrap:wrap;
+    }
     .btn {
+      @media screen and (max-width:1200px){
+        margin-bottom:6px;
+      }
       &:last-child {
         margin-left: auto;
+        margin-left:12px;
+        @media screen and (max-width:1200px){
+          margin-left: 0;
+        }
       }
     }
   }

gfi-ihk-2024/stories/sections/participation-teasers/participation-teasers.scss

@@ -15,13 +15,14 @@
   h2, .like-h2 {
     margin-top: var(--section-headline-margin);
   }
-
+  .overflow-wrapper{
+    overflow:hidden;
+  }
   .row {
-    flex-wrap: nowrap;
     margin: calc(var(--col-padding) * -1);
     padding-top: 0.3em;
-
-    @media(max-width: 999px) {
+    overflow:hidden;
+    @media(max-width: 1099px) {
       &::after {
         content: '';
         position: relative;
@@ -47,16 +48,18 @@
 
     &:last-child {
       margin-right: auto;
+      @media(max-width: 1099px) {
+        flex: 1 1 100%;
+        max-width: 100%;
+      }
     }
 
-    @media(max-width: 999px) {
+    @media(max-width: 1099px) {
       flex: 1 1 50%;
       max-width: 50%;
-      min-width: 44vw;
     }
     @media(max-width: 767px) {
       padding: 6px;
-      min-width: calc(50vw - 30px);
     }
     @media(max-width: 567px) {
       flex: 1 1 100%;
@@ -64,7 +67,7 @@
       min-width: 320px;
     }
     @media(max-width: 359px) {
-      min-width: 300px;
+      min-width: 280px;
     }
   }
 
@@ -72,4 +75,5 @@
     text-align: center;
     margin: calc(var(--col-padding) + 1.5em) 0 0;
   }
+
 }