Experience Builder- Widgets behaving (visible) differently in different laptop screen sizes

Question

Hello everyone,

I wanted to ask a very specific question over here. I made a web-app from scratch (blank page) using Experience Builder. I have almost finished it and was in the testing phase, where I am facing issues with page elements (different widget like text, image etc.) are behaving differently (visible differently) in different laptop screens according to their size. So, Here I am not sure what settings of the widgets need to be changed to make it look static across all the screen sizes and not change dynamically.

I have prepared my app for desktop screen size for now and it should be seen like this-

But instead, in a smaller laptop screen size, it is visible like-

As you can see the title text is cut down and similarly other elements screen size also changes a bit when viewed on a slightly different screen size. Can anyone please suggest me any process which can fix my widget sizes to be visible with the same dimensions across all laptop screens.

RishV-B · Answer

I got very excited about EB, but recently the more I build, the more limitations I encounter. So I started working in EB Dev edition (well, more like pocking around for now).

Basically, what I found the least frustrating thing to do in this case, is ditching all widgets to pending, and then bring what you need from pending back to your mobile view, adjust it all and test. Make sure that your desktop view is all set to %, otherwise nothing will work properly except for the screen size you are designing in.

I think it is more like evolution of things (like with Pro), just needs to keep track of changes on a regular basis.

JeffreyThompson2 · Answer

A general best practice in web design is to design based on percentages rather than pixels. (I think Experience Builder defaults to pixels.) That way it should work on a broader range of screen sizes. Getting a website to look good on any screen is one of the hardest and most frustrating challenges of web design and Experience Builder really limits the number of controls you have to adjust your design making it even more difficult.

One other trick to try is to use your browser's Dev Tools to see how your page looks on other devices and screen sizes. Here's how to do it in Chrome: https://www.makeuseof.com/google-chrome-preview-website-different-devices/ Every browser should have a version of this built in.

kenbuja · Answer

You should get familiar with use the Pending tab with your widgets to make them look better for mobile devices. There are some videos from past conferences available that go over how to optimize your page for mobile devices.

* ArcGIS Experience Builder: Mobile Optimization 
* Optimizing Your No Code Web App for Mobile Using ArcGIS Experience Builder

One thing mentioned during a session at this year's User Conference is a push to make Experience Builder more mobile-first so it's easier to build pages.

Since you're using a dashboard, you'll want to create a more mobile-friendly version of it, also.