Breakpoints

Device breakpoints explained

Breakpoints transform your apps once they reach a certain screen size, giving the user a smoother and more optimal experience.

With Ycode, you can preview what your app will look like on different screen sizes. For each view, you can edit the design so it's perfectly optimized for that specific screen size.

Each edit you make for a specific screen size cascades to the smaller sizes. For example, if you make a change on a medium (MD) screen size, the changes will cascade to the smaller (S) screen size.

Finding breakpoints in Ycode

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

There are two ways to use breakpoints in Ycode.

The first way is to select the screen size you want to preview below your canvas.

The second way is to navigate to the right side of the canvas and open the Design tab. Then click All screens, this unfolds a menu with different screen sizes. By clicking the different screen sizes, you can see what your design looks like for each view.

• SM (small) and MD (medium) screens are the sizes of mobiles, like iPhone 6 and higher

• LG (large) screens are the size of most tablets

• All screens/Desktops is the default size

• XL screens are laptop and desktop screens

• XL screens are for larger monitors