How to design a mobile responsive design using Page builder Magento 2.4.2

Question

Good Morning We are trying to design my home page fully using page builder, but the page builder is not working in responsive we had tried the page builder options to adopt in responsive but we can achieve what we need.

1. First the slider the slider is showing better in desktop when we go to responsive the slider and image is not getting small it shows very big only.
2. I need to show the 8 icons in one row at desktop version but when it comes to mobile need to show the 8 icons in two row set of 4 but when it comes to mobile version it show one buy one.

Answer 1

I am not yet familiar with the Pagebuilder, but I have programmed it as follows:

I have made two new fields for the Row element:

• data-grid-size-desktop
• data-grid-size-mobile

There you can now specify the numbers 1-12 and then I have converted that using css flexbox e.g.

@media (min-width: 768px) {
[data-grid-size-desktop='3'] .pagebuilder-column {
    flex-basis: 33.33333333333333%;
}
}
[data-grid-size-mobile='2'] .pagebuilder-column {
    flex-basis: 50%;
}

Without own programming you will not get far here

Also I have so the images ratio so programmed and me the function of Bootstrap 5 so taken over:

data-ratio="16x9"

[data-ratio='16x9'] {
    --bs-aspect-ratio: calc(56.25%);
}

Referenz: https://devdocs.magento.com/page-builder/docs/content-types/extend/extend-appearances.html

Answer 2

How about this solution https://github.com/Goomento/PageBuilder/wiki/Use-Editor#5-preview-in-mobile-tablet-and-desktop, one-click toggle devices and edit it away