Merge pull request #948 from WebDevStudios/hotfix/885-column-width

Hotfix/885 column width

Author: gregrickaby

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({
@@ -21,13 +22,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

@@ -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.
  */
@@ -28,7 +29,8 @@ export default function BlockColumns({
   innerBlocks,
   style,
   textColorHex,
-  verticalAlignment
+  verticalAlignment,
+  isStackedOnMobile
 }) {
   const columnsStyle = getBlockStyles({
     backgroundColorHex,
@@ -46,14 +48,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 (