How to stop auto resizing of ExB based off of screen size

[elpinguino]

This may sound like a funny question.

I always liked how products could autosize to the screen I was using, however it's bugging the organisation I build the ExB for because it reshapes too much. (I guess their screens are too small. No they are not looking at it on their phones. They are using laptops.)

Hopefully an easy win for somebody. Is there something I can do in ExB to stop the autoresizing?

They would prefer to have to scroll to see the rest of the page.

[DavidColey]

Hi @elpinguino  - at the end of the day the breaks are simply css breaks.  I have found that although the 'Auto' does ok on some app solutions, I really have to go into each of the large, mid and small screen size options, switch to 'Custom' and begin to test at each of the high and low end of the size breaks to make sure that each of my widgets and frames, text and images will be displayed properly.

For example, when using a sidebar type of container - and then on anything other than a desktop-size monitor, I find my layouts more intuitive when I switch from a left-right ui to an up-down ui.  Hope this helps.

[elpinguino]

Hi David,

I have tried that, here's a better example of what I mean. I am working with users who sometimes only have their laptop (so don't have two screens) and they need to be able to see two windows at once. Experience Builder moves the objects on the page around to make it fit in all one view, but the user would prefer to scroll rather than having the objects readjust. More importantly when I make the window smaller, all the widgets revert back to templates, not what I've published.

The screen size is 1920x1080. I have also changed Content width to custom- 1920 max.

Screenshots of published item, but only using have the screen.

@Jianxia are you able to help here?

[Jianxia]

There are two types of Unit that control the layout - pixel and percentage. Usually we use the pixel for the full screen and percentage for the scrolling page. In your case, the widgets on the scrolling page by default are in the percentage therefore their positions change based on the width and height of the browser. You may change the unit to px as shown below for the fixed width and height.

This video talks about layouts and styles in ExB.

[elpinguino]

Hi @Jianxia ,

Thanks for your reply. I have changed all the blocks to 1920 px width. It looks promising, but there are still some issues.

When I use the ExB in a smaller screen, the wider parts are cut off or the background colour doesn't show properly. I took a video showing the issue.

This video shows how it works in a 1920 screen, but when I make the screen size smaller, the widgets do not refresh.

The video you shared was useful. Thank you. I watched it once during the user conference. Watching it again was a good refresher. If anyone else stumbles across this post later. The section to go to is at 27 minutes - px vs %.

[DavidColey]

Hi @elpinguino , the only thing I have been able to do is tune my layouts for each of the large, medium and small screen sizes by setting widgets to pending and then re-adding them with custom sizes

For some small sizes, I have had to eliminate certain widgets.  Generally anything other than a desktop I go vertical for portrait orientations.  Then on tablets, a landscape orientation will bounce back to more of horizontal type layout.

[elpinguino]

Thanks David. Just talked to the client. Looks like they are only experience the screen minimizing issue like me. When they move the ExB from 1920 to a smaller laptop screen, the far left and right sides aren't cut off.