How to customize breakpoints for UI patterns

The UI Pattern Block offers three different breakpoints to visualize the responsiveness of your code. It's easy to customize them if needed.

Written by Michael J. Müller Updated over a week ago

To visualize how your site's content responds to different screen sizes, Frontify offers the UI Pattern Block to embed your code and trigger three default breakpoints:

Desktop, 1200px,

Default 800px,

and Mobile 400px.

If you need different breakpoints than the ones above, it is easy to customize them in your general settings in the Powerbar. Afterwards, refresh your browser to make sure that all the breakpoints get updated.