Removal of scroll bar in lower resolution and yet write the CSS to correspoding breakpoint in Adaptive resolution managment

[RajivJain03]

Removal of scroll bar in lower resolution and yet write the CSS to corresponding breakpoint in Adaptive resolution management

We are using Adaptive resolution management and supporting multiple devices with different sizes. Maintaining different breakpoint corresponding to each device size and writing corresponding CSS to that breakpoint. Based on the device selected, if component is moved or styled then CSS corresponding to that breakpoint is modified and updated. So we are maintain different devices with adaptive size with the help of corresponding breakpoint.

We are having issue with lower resolution components placement beyond the Iframe scrollbars.

Suppose user adds four buttons and 2 are on the border in the highest resolution. User wants to specify different layout (or position) of buttons in lower resolution. As user change the resolution, the gjs-frame-wrapper width and height changed to device size and
iframe shows scroll bar as few components are outside the device size.

We want to remove the scroll bar, so that user can easily drag the components inside the lower resolution viewport. But as we remove gjs-frame-wrapper width and height, it breaks the breakpoint logic as GrapesJS is not able to find the breakpoint corresponding the device size.

Please let us know if there is any way we can remove the scroll bar so that user can easily drag the elements inside viewport.

[artf]

Not sure I understand properly the use case.
How do you define those devices? Are you setting the height?

But as we remove gjs-frame-wrapper width and height, it breaks the breakpoint logic as GrapesJS is not able to find the breakpoint corresponding the device size.

What if you remove only the height? Will this act as you desire?

[RajivJain03]

We are defining the devices with max-width attribute. We are not setting the height. Component could be off canvas on the horizontal side also. For the simplicity I have shown off canvas component on the height/Vertical side only.

@media (orientation: landscape) and (max-width: 2561px){
@media (orientation: landscape) and (max-width: 1261px){

Removing the height only won't solve the issue.

Please let me know if you want to have meeting, I can setup one, if needed.