Fix width to elements on small screens

- Implement stacked on mobile feature. The same functionality from columns.
greenpeace · May 4, 2022 · 242c967 · 242c967
1 parent ff554b9
commit 242c967
Showing 1 changed file with 10 additions and 1 deletion.
diff --git a/assets/src/styles/blocks.scss b/assets/src/styles/blocks.scss
@@ -47,9 +47,18 @@
 
 .is-style-space-evenly {
   & > * {
-    flex-basis: 0;
     flex-grow: 1;
     align-self: stretch;
+
+    @include medium-and-up {
+      flex-grow: 0;
+      flex-basis: calc(50% - calc(var(--wp--style--block-gap, 2em) / 2));
+    }
+
+    @include large-and-up {
+      flex-basis: 0;
+      flex-grow: 1;
+    }
   }
 }