nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Change the Mobile View Screen Size to Common Phones

progers_chamblee

Instead of having different screen ratios, change the screen selection to some common phones. Depending on browsers and OS, experiences show differently on different devices. Having the ability to see what the app looks like on the smallest or largest phones would greatly benefit the creator.

Find more posts tagged with

Page and Window

Others

Status: Open

Comments

NicoleJohnson

You can emulate your experience on all kinds of devices with your browser's dev tools. Here are instructions for Microsoft Edge--it'll be virtually the same in Chrome or Firefox:

https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/device-mode/

Basically, "preview" your experience, then follow the instructions at the link.

Sometimes the live view can give unexpected results or just get the experience into a weird state. For testing, I recommend previewing your experience.

progers_chamblee

Thanks @NicoleJohnson. we have used this previously, but our issue that we are running into is the mobile browsers, such as safari, have their URL listed on the bottom part of the screen, while others have theirs on the top. This interferes with certain widgets, and could be mitigated by hopefully showing the browser choice or screen choice in Experience Builder. Currently, we have to have 2 or more different phones, or employees with different phones to check the usability of our experiences.

Hope this clarified some details of our issue!

Aaron_Gover

@NicoleJohnson

It's worth mentioning that the functionality mentioned by @progers_chamblee is available in the Web App Builder but does not exist in the Web Experience Builder. For example, in the Web App Builder, there's an option called Previews that allows the creator to view the app on multiple different devices. Additionally, the app will automatically adjust all widgets and tools to fit the new screen size. The current version of Web Experience Builder does have the option called "Custom" that's supposed to allow for different configurations of widgets and tools between device sizes, however it seems that certain things like the tools available for a map widget are the same across all device types.