Introduction
This module was created to resolve a common issue faced by content creators attempting to build responsive layouts using Magento 2 Pagebuilder. CMS pages and blocks built using Pagebuilder don't handle responsiveness very well, you are able to build interesting layouts on desktop, but once its switched to mobile, the only option currently available is to stack all the content.
Common issue examples:
Paddings and Margins - Two issues occur when using Paddings and Margins with Pagebuilder to handle layout issues. 1). They are not device specific, applying them on desktop view will also impact mobile, adding a 70px padding left on desktop might look good, but switching to mobile where the screen space is limited, this will be a problem. 2). Adding spacing between columns can be a time consuming task when having to manually change the spacing for each individual column and this will cause issues on mobile where the items are stacked instead of in a row.
Stacking - When switching to mobile view all elements on the page will stack, this can cause valuable screen space to be wasted on mobile devices.
Ordering - A common layout on desktop is to have [Image][Text] and [Text][Image] 50-50 content sections, however, on mobile devices this will result in the image and text being in an undesirable and visually unappealing configuration.
Solution:
Paddings and Margins - The solution I found works best for the issues caused when using these to handle layout was to simply not use them. Instead I opted to adding a new input on the column line content type to allow the user to take advantage of the gap CSS property. Why? Consistency! I've setup the gap property so that it can be configured on mobile and desktop independently, which allows the user to have more control per device. Gap also works in a unique way, instead of setting a specific area for the gap to be applied to, it applies just between each item, meaning on mobile devices you wont have odd spacing to the left and right, just between the items.
Stacking - To handle the layout stacking issue, I wanted to provide used with the option to set how they wanted elements to display on mobile. Typically items on mobile take advantage of the space available by having elements display in one column, or two. To provide control over this I added an extension to the column group which allows users to set the number of columns on mobile.
Ordering - To handle the ordering issue I added another option which allows the user to choose the order in which the elements show on mobile by giving the option to reverse the column.
Before the reverse:
After the reverse:
Final thoughts:
Often when it comes to Pagebuilder I see temporary solutions implemented for highly specific sections, these solutions are often added to the codebase for one time use which causes bloat, it also results in inconsistent views in the admin panel and the frontend of the site meaning that in order to see the end result, the user would need to save the changes and load the page on the frontend.
The best solution is to create reusable components that work with Pagebuilder instead of against it, this keeps everything clean and provides content creators with more options and flexibility.