You can make the same app respond to various screen sizes and adapt it's looks and behaviour. 

Selecting a screen size to view -






At the screen shot above:

  1. Press a button to select which screen size to edit (marked Red ↑) 
  2. Select a screen size which you need to PREVIEW (this is just a PREVIEW pane to see how it will look at each screen size, actual breakpoints are added on Properties of Elements/Components). Marked green ↑.
    1. XS - extra small
    2. S - small
    3. M - medium
    4. L - large
    5. XL - extra larger
  3. Adjust preview pane's scale to better fit your screen. Marked purple ↑. This is mostly needed to build for L and XL type of screens. 


I M P O R T A N T !!! - THE DEFAULT SETTING IS FROM ZERO px to INFINITY px. 

So if you do not add any break points, it will be the same stretched/compressed app for all screenю sizes.

So for example Adding just one break point, say "M" will make all screens LESS then M's 1440 be the same, so XS, S & M will have the same appearance. For everything over 1440 it will also be the same. 

Layout Samples



You can study how the screen responsiveness works you can pull in samples layout called Dashboard (marked Green ↓) from the left menu (marked Purple ↓) and click between screen sizes to see its changing.


Changing Width at Break Points


The platform uses a standard 12 column grid for all rows. This setting only belongs to a Cell inside of the Flex Row component, as it the container for any other set of components.


Cell is either a Column or a Row within a Flex Row, depending on which span direction is in settings tab for the Flex Row (Row or Column) So to access it open a Flexrow and click a Column (marked orange ↓)  and at the Properties tab (marked purple ↓) you will see the Adaptive Width section ( marked green ↓).


This allows placing needed elements of your application into a needed position on each particular screen size. Or hide Columns/Rows of FlexRow, as in the example above, 0 (zero) means it will have NO width available for this very Column. If we had, say 4, it would mean that Column takes 4/12 or = to 1/3 of the total width available to it. Setting 8 would mean 8/12th or 2/3 of the width and so on. 


Width is by default cut out of the right side, so the cell will hang to left. 

This setting can be changed at the FlewRow itself in Settings tab > Blocks align. "Start" is the default one.

 



You can select a break point and set how many grid cells will be used in it. You can add and delete certain break points for this very Row - Column. 



Changing Design at Break Points


Each of the Components has ability to set looks and design for each type of the screen, to better match UX/UI requirements.


At the View tab (marked green ↓) open CSS Scope block (marked red ↓). You can Add new break points by pressing the menu dots (marked blue ↓), also edit and delete break points.


Everything you set for a certain break point on the View tab (Fonts, sizes, colors, margins, etc etc) will ONLY be applied from that screen size and up to the next break point you set. 



You can also set elements invisible for certain break points. Allowing you to:


You just need to set one Component invisible and the other visible, for each break point:




Related articles

Related articles appear here based on the labels you select. Click to edit the macro and add or change labels.



Related issues