Lack of basic responsiveness support in PageBuilder

[lbajsarowicz]

Description (*)

The very basic scenario for responsiveness is that you may need to have 6 columns in a row for desktop, but 3 for mobile. PageBuilder not only does not provide such possibility, but also hardcodes the width: 100% into style="". As a result, you cannot even make website elements responsive with CSS as the styles are being overriden.

Expected behavior (*)

The bootstrap-like classes should be used for definition of with / number of columns, as a result, you would be able to declare that you want to display X columns in desktop, Y columns in mobile version.

Also - there should be no width hardcoded in style="" attribute.

Benefits

PageBuilder would support basic responsiveness

Additional information

[lbajsarowicz]

The hardcoded width: 100% is still there for latest develop branch from magento2-page-builder repository:

<div data-content-type="row" data-appearance="contained" data-element="main"><div data-enable-parallax="0" data-parallax-speed="0.5" data-background-images="{}" data-background-type="image" data-video-loop="true" data-video-play-only-visible="true" data-video-lazy-load="true" data-video-fallback-src="" data-element="inner" style="justify-content: flex-start; display: flex; flex-direction: column; background-position: left top; background-size: cover; background-repeat: no-repeat; background-attachment: scroll; border-style: none; border-width: 1px; border-radius: 0px; margin: 0px 0px 10px; padding: 10px;"><div class="pagebuilder-column-group" style="display: flex;" data-content-type="column-group" data-grid-size="12" data-element="main"><div class="pagebuilder-column" data-content-type="column" data-appearance="full-height" data-background-images="{}" data-element="main" style="justify-content: flex-start; display: flex; flex-direction: column; background-position: left top; background-size: cover; background-repeat: no-repeat; background-attachment: scroll; border-style: none; border-width: 1px; border-radius: 0px; width: 100%; margin: 0px; padding: 10px; align-self: stretch;"></div></div></div></div>

[omiroshnichenko]

The inline style problem has been solved in the scope of the #558. This improvement will be available in the next release which will be available in Magento 2.4.2 release. Along with these improvements we will post an article on devdocs how it works and how to use it. Thanks for your report.