Modify breakpoints
To help your app run smoothly on different devices, Uiflow's Design view includes "breakpoints" which enable you to configure layouts for the following screen sizes and orientations:
- Desktop
- Tablet
- Phone horizontal
- Phone vertical
These breakpoints are accessible by clicking the corresponding buttons at the top of the Design view:
Note: The term breakpoint in Uiflow refers to the different visual layouts available. It does not refer to a debugging breakpoint found in most development frameworks and IDEs.
This guide describes how to work with breakpoints:
The buttons for the four breakpoints are ordered from the largest to smallest screen sizes. When you apply a change to a larger breakpoint, the change is applied to the smaller breakpoints to the right. Changes to the smaller breakpoint(s) don't affect the larger breakpoint(s) to the left and thus override them.
The following example shows the four layouts of an app where the title font colour and Container component column counts have been adjusted for each:
Breakpoint | Width | Example |
|---|---|---|
Desktop | 1323px |  |
Tablet | 991px |  |
Phone Horizontal | 767px |  |
Phone Vertical | 479px |  |
You can preview the different breakpoints in the Design view by either clicking the corresponding button or by dragging the handles to the left and right of the preview. As you reduce the width using the handles, Uiflow will display the next smallest breakpoint once the width matches its size.
Note: If your screen size is smaller than the selected breakpoint, the application preview fits-to-width. In this scenario, the handles do not appear and you should use the buttons to switch breakpoints.
To preview the different breakpoints in the Logic view's interactive preview, click the Page Preview button to display the Preview window and drag the left side to resize it. When the width matches that of one of the breakpoints, the settings for that breakpoint are applied.
Using the interactive preview is necessary for viewing functional changes configured in breakpoints (e.g. changes to a component's Variants > Hover settings).