What are device breakpoints?

Breakpoints “transform” your apps once they reach a certain screen size, giving the user a more smooth and optimal experience. With Ycode, you can preview how your app will look on different screen sizes. For each view, you can edit the design so it's perfectly optimized for that specific screen size.

Where to find breakpoints in Ycode

You’re finished building your app and now you want to preview what it looks like on different devices. Great!

Above your canvas you have an All screens text, clicking on it will show you a dropdown menu with a few screen options:

  • SM (small) goes up to 640px.

  • MD (medium) goes up to 844px.

  • LG (large) goes up to 1080px.

  • All screens/Desktops is the default size.

  • XL screens go to 1536px and more.

  • 2XL screens go to 1920px and more.

Note: Each edit you make for a specific screen size cascades to the smaller sizes. For example, if you make a change to a medium (MD) screen size, the changes will cascade to the smaller (S) screen size. If you make changes to the XL screen size it will cascade up to the 2XL screen.