search

magento / magento2-page-builder

Magento2 PageBuilder
Other
80 stars 62 forks source link

Lack of basic responsiveness support in PageBuilder #491

Closed lbajsarowicz closed 3 years ago

lbajsarowicz commented 4 years ago

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 commented 4 years ago

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 commented 3 years ago

The inline style problem has been solved in the scope of the https://github.com/magento/magento2-page-builder/issues/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.