Browser Zoom Issues [On Desktop]

Need help Responsiveness
1

UI design looks terrible when browser is zoomed on desktop. Any recommendations to solve this?

1. The Problem

How navigation arrows should look, not using browser zoom here.
Screen Shot 2021-04-02 at 9.37.19 AM

How navigation arrows look when using browser zoom.
Screen Shot 2021-04-02 at 9.37.46 AM

As you can see, the navigation arrows stack on top of each other. This is just one example, multiply this problem by 100 other elements and you get the idea of how bad the app looks to users.

2. How to re-create the issue:
Step 1. On your browser: View > Zoom In
Screen Shot 2021-04-02 at 9.32.31 AM

Step 2. Refresh the page. The browser zoom will remain. And now your elements are looking disorganized.

3. More Detail on the Example:
Each navigation arrow element is contained in a group which is set to fixed width.

Screen Shot 2021-04-02 at 9.40.39 AM

2

Quick update - I solved this with two steps:

  1. Set all elements in the group to left orientation. (they were all centered).

  2. Make sure there’s space between the left and right wall of the parent group. (they used to be butting up against the walls of the group. (x = 0)

1 Like