From 63824f32316ce4c9dc6ce680222edafdb1ed20c9 Mon Sep 17 00:00:00 2001
From: johnrobertmcc <john.robert.mcc@gmail.com>
Date: Wed, 23 Feb 2022 10:44:22 -0500
Subject: [PATCH 1/3] fixed column width

---
 components/atoms/Columns/Columns.js                 | 4 +++-
 components/atoms/Columns/Columns.module.css         | 8 ++++++--
 components/blocks/core/BlockColumns/BlockColumns.js | 6 ++++--
 3 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/components/atoms/Columns/Columns.js b/components/atoms/Columns/Columns.js
index 9bd78e84a..da37cdaab 100644
--- a/components/atoms/Columns/Columns.js
+++ b/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,
diff --git a/components/atoms/Columns/Columns.module.css b/components/atoms/Columns/Columns.module.css
index 4306ece89..c80274d71 100644
--- a/components/atoms/Columns/Columns.module.css
+++ b/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;
diff --git a/components/blocks/core/BlockColumns/BlockColumns.js b/components/blocks/core/BlockColumns/BlockColumns.js
index 8be46e3d0..e5c6abf45 100644
--- a/components/blocks/core/BlockColumns/BlockColumns.js
+++ b/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,6 +47,7 @@ export default function BlockColumns({
           columnCount={innerBlocks?.length}
           style={columnsStyle}
           verticalAlignment={verticalAlignment}
+          isStackedOnMobile={isStackedOnMobile}
         >
           {innerBlocks.map(({attributes, innerBlocks}, index) => {
             const columnStyle = getBlockStyles({
@@ -53,7 +55,7 @@ export default function BlockColumns({
               gradientHex: attributes?.gradientHex,
               textColorHex: attributes?.textColorHex,
               style: attributes?.style,
-              width: attributes?.width || '50%'
+              width: attributes?.width
             })
 
             return (

From ac238a04ed5988c01cdc9fa3da04dc3823801dc9 Mon Sep 17 00:00:00 2001
From: johnrobertmcc <john.robert.mcc@gmail.com>
Date: Wed, 23 Feb 2022 10:45:39 -0500
Subject: [PATCH 2/3] jsdocs

---
 components/atoms/Columns/Columns.js                 | 1 +
 components/blocks/core/BlockColumns/BlockColumns.js | 1 +
 2 files changed, 2 insertions(+)

diff --git a/components/atoms/Columns/Columns.js b/components/atoms/Columns/Columns.js
index da37cdaab..a2e9aac9e 100644
--- a/components/atoms/Columns/Columns.js
+++ b/components/atoms/Columns/Columns.js
@@ -13,6 +13,7 @@ import styles from './Columns.module.css'
  * @param  {object}  props.children          React children.
  * @param  {object}  props.style             Custom columns styles.
  * @param  {string}  props.verticalAlignment Vertical alignment of columns.
+ * @param    {boolean}        props.isStackedOnMobile Checks if the columns are stacked.
  * @return {Element}                         The Columns component.
  */
 export default function Columns({
diff --git a/components/blocks/core/BlockColumns/BlockColumns.js b/components/blocks/core/BlockColumns/BlockColumns.js
index e5c6abf45..173a6adc2 100644
--- a/components/blocks/core/BlockColumns/BlockColumns.js
+++ b/components/blocks/core/BlockColumns/BlockColumns.js
@@ -17,6 +17,7 @@ import PropTypes from 'prop-types'
  * @param  {object}  props.innerBlocks        The array of inner blocks to display.
  * @param  {object}  props.style              The style attributes.
  * @param  {string}  props.textColorHex       The text color hex value.
+ * @param    {boolean}        props.isStackedOnMobile Checks if the columns are stacked.
  * @param  {string}  props.verticalAlignment  Vertical alignment of columns.
  * @return {Element}                          The Columns component.
  */

From d2a6be46426678367e205aa52b8a2ce54bbef1bd Mon Sep 17 00:00:00 2001
From: johnrobertmcc <john.robert.mcc@gmail.com>
Date: Wed, 23 Feb 2022 10:55:26 -0500
Subject: [PATCH 3/3] lint

---
 components/atoms/Columns/Columns.js                 | 2 +-
 components/blocks/core/BlockColumns/BlockColumns.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/atoms/Columns/Columns.js b/components/atoms/Columns/Columns.js
index a2e9aac9e..6995460ad 100644
--- a/components/atoms/Columns/Columns.js
+++ b/components/atoms/Columns/Columns.js
@@ -13,7 +13,7 @@ import styles from './Columns.module.css'
  * @param  {object}  props.children          React children.
  * @param  {object}  props.style             Custom columns styles.
  * @param  {string}  props.verticalAlignment Vertical alignment of columns.
- * @param    {boolean}        props.isStackedOnMobile Checks if the columns are stacked.
+ * @param  {boolean} props.isStackedOnMobile Checks if the columns are stacked.
  * @return {Element}                         The Columns component.
  */
 export default function Columns({
diff --git a/components/blocks/core/BlockColumns/BlockColumns.js b/components/blocks/core/BlockColumns/BlockColumns.js
index 173a6adc2..9dbd86d6f 100644
--- a/components/blocks/core/BlockColumns/BlockColumns.js
+++ b/components/blocks/core/BlockColumns/BlockColumns.js
@@ -17,7 +17,7 @@ import PropTypes from 'prop-types'
  * @param  {object}  props.innerBlocks        The array of inner blocks to display.
  * @param  {object}  props.style              The style attributes.
  * @param  {string}  props.textColorHex       The text color hex value.
- * @param    {boolean}        props.isStackedOnMobile Checks if the columns are stacked.
+ * @param  {boolean} props.isStackedOnMobile  Checks if the columns are stacked.
  * @param  {string}  props.verticalAlignment  Vertical alignment of columns.
  * @return {Element}                          The Columns component.
  */