Change layout and font size at breakpoints

Problem

You want to responsively change the layout or size of your application components based on the user’s viewport (desktop, tablet, mobile, etc).

Solution

1. Select the Container or Iterator that you would like to change the layout of
2. Find the property that you’d like to make responsive, such as the Layout » Direction property
3. Click the property, thereby expanding the custom code window
4. In the custom code window, use $app.viewportWidth and $breakpoint to make your layout responsive. For example, to change the stack direction from horizontal to vertical when on tablet devices and below, you can use:

{{ $app.viewportWidth < $breakpoint.Tablet ? "VERTICAL_STACK" : "HORIZONTAL_STACK" }}

Or if you want to change the font size of a Text component, set its Font Size to:

{{ $app.viewportWidth < $breakpoint.Tablet ? "sm" : "md" }}

Discussion

• Dynaboard gives you programmatic control over your breakpoint logic. $app.viewportWidth and $app.viewportHeight return numbers, so you can compare them against any value you’d like, like 1337.
• The built-in $breakpoint values are:

const $breakpoint = {
	Mobile: 320,
	Tablet: 768,
	Laptop: 1024,
	Desktop: 1280
}

• Use the Stack mode for Page and Container to make them respond to the size of their contents. Grid mode works best for designing responsive components and simpler pages.

Known Limitations

• Dynaboard does not currently support other @media queries than based on $app.viewportWidth and $app.viewportHeight

See also

• Add custom CSS to a UI component