fixed column width

Author: johnrobertmcc

components/atoms/Columns/Columns.js

@@ -21,13 +21,15 @@ export default function Columns({
   columnCount,
   children,
   style,
-  verticalAlignment
+  verticalAlignment,
+  isStackedOnMobile
 }) {
   return (
     <div
       id={id || null}
       className={cn(
         styles.columns,
+        isStackedOnMobile && styles.columnStacked,
         columnCount && styles[`columns-${columnCount}`],
         className,
         verticalAlignment === 'center' ? styles.alignCenter : null,

components/atoms/Columns/Columns.module.css

@@ -1,5 +1,9 @@
 .columns {
-  @apply flex flex-row gap-8;
+  @apply flex gap-8;
+
+  &.columnStacked {
+    @apply flex-col md:flex-row;
+  }
 
   &.alignCenter {
     & .column {
@@ -18,7 +22,7 @@
   }
 
   & .column {
-    @apply flex flex-col;
+    @apply flex flex-col w-full;
 
     &.hasBackground {
       @apply p-4;

components/blocks/core/BlockColumns/BlockColumns.js

@@ -28,7 +28,8 @@ export default function BlockColumns({
   innerBlocks,
   style,
   textColorHex,
-  verticalAlignment
+  verticalAlignment,
+  isStackedOnMobile
 }) {
   const columnsStyle = getBlockStyles({
     backgroundColorHex,
@@ -46,14 +47,15 @@ export default function BlockColumns({
           columnCount={innerBlocks?.length}
           style={columnsStyle}
           verticalAlignment={verticalAlignment}
+          isStackedOnMobile={isStackedOnMobile}
         >
           {innerBlocks.map(({attributes, innerBlocks}, index) => {
             const columnStyle = getBlockStyles({
               backgroundColorHex: attributes?.backgroundColorHex,
               gradientHex: attributes?.gradientHex,
               textColorHex: attributes?.textColorHex,
               style: attributes?.style,
-              width: attributes?.width || '50%'
+              width: attributes?.width
             })
 
             return (