KNOWLEDGE BASE
Space shortcuts
Page tree

Versions Compared

Old Version 1

changes.mady.by.user Support Team 1

Saved on

compared with

New Version 2

changes.mady.by.user Support Team 1

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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

Table of Contents

Selecting a screen size to view -

...

  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.

...

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.

 Image Modified



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. 

...

Page properties
hiddentrue


Related issues