Appeggio Help
Search…
Sizing and alignment
This section takes you through sizing parts of your app for various device sizes, as well as alignment of parts.
Appeggio's pre-configured parts and templates are already sized to be responsive across all device sizes. However, it's important to know how to review your pages for responsiveness and make any changes necessary.
The middle of the top toolbar shows what your app will look like across a range of screen sizes:
Top toolbar showing screen sizes
- 1.a mobile with an extra small screen (size 1),
- 2.a mobile or tablet with a small screen (size 2),
- 3.a tablet with a medium screen (size 3),
- 4.on the web with a large screen (size 4),
- 5.on the web with an extra large screen (size 5),
- 6.and to fit the screen (size 6).
When you select any of the screen sizes, you'll see what your app will look like for that particular size. That is when you may notice that you need to resize some parts to be suitable for a particular screen size.
Appeggio has made it as easy as possible for you to do just that, and many of our parts can be adjusted to best suit the various screen sizes.
Appeggio assumes that the width of any screen is 12 cells. On a smaller screen, say a mobile, you'll need most (or all) of your parts to span the full 12 cells in order to see them properly on the screen. For a tablet with a medium screen, the parts sizes can be smaller.
It may be best to illustrate this with an example.
Let's take a look at something we are creating on a desktop with large screen (size 5). A multi info card row has been added as follows:
Multi info card card shown on screen size 5 (web extra large screen)
You'll see that the cards take up the full width of the screen. The full width available is 12 cells, so the columns have defaulted to being 3 cells wide for this size.
When we look at the same page on the web with a large screen, the sizing is the same. The columns have defaulted to being 3 cells wide for this size, and the same for a medium size screen:
Multi info card row shown on screen size 4 (web large screen)
Multi info card row shown on screen size 3 (tablet with medium screen)
When it comes to the smaller size screens, the default card columns become wider to take up more of the screen each. Their size has been defaulted to 12 cells (rather than to 3 cells) so that the images and text all fit nicely on the screen.
Multi info card row shown on screen size 2 (mobile or small tablet)
Multi info screen row shown on screen size 1 (mobile)
The sizing is easy to change across the range of device sizes. Just click on the column containing the card. The toolbar will appear, and you click on the sizing icon, shown below:
We can also change the size of text based across all of the device sizes:
And the alignment of various parts can be changed across all of the device sizes:
Last modified 4mo ago
Copy link