Appeggio Help
Search…
Sizing and alignment
This section takes you through sizing parts of your app for various divide sizes, as well as the alignment of parts.
Sizing for responsiveness
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:
- 1.mobile with an extra small screen (size 1),
- 2.mobile with a small screen (size 2),
- 3.tablet with a medium screen (size 3),
- 4.web with a large screen (size 4),
- 5.web with an extra-large screen (size 5),
- 6.web with a huge screen (size 6),
- 7.and to fit the screen (size 7).
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 laptop with a large screen, the sizes of the parts can be set smaller to account for the larger screen size space available.
Setting the span is done via the column halo toolbar. This toolbar can also be used to align parts vertically.
It may be best to illustrate this with an example.
Let’s say that on a laptop, we want to display 4 items in a row. In the example below, a screen section containing 4 cards was used. They come prefigured to fit optimally across all screen sizes. You can see that there are 4 items that span the screen. Each one is housed within a column, and each column can be sized appropriately for the relevant screen size. In the case below, each column has a span of 3 cells. Therefore, the 4 columns each with a span of 3 take up the full screen size of 12 cells.
To change the size of the column, or to view the size of the column for the different screen sizes, click on the sizing icon on the column halo toolbar as shown below:
This will open the sizing menu, and you will see device sizes across the top. In the image above, the smallest device is shown (colored blue) as being sized to 12 cells, meaning that the column will take the full width of 12 cells across the small device.
When it comes to the smaller size screens, the default card columns become wider to take up more of the screen each. Their size defaults to 12 cells (rather than 3 cells) so that the images and text all fit nicely on the screen.
You’ll see that screen size 2 (small screen) is set to default size in the menu, meaning that it will span 12 as that is what the smaller size is set at.
For screen size 3 (medium screen), the column will span a width of 3 cells. You’ll see that for screen sizes 4 (large screen) and 5 (extra-large screen) they are defaulted meaning the columns will also span a width of 3 cells. This is illustrated in the image below:
There is no sizing available for screen size 6 (huge screen) as this defaults to whatever the size has been set for an extra-large screen.
You can change any of these settings. You might decide for a screen size of 2 (a small screen) you want to show 2 columns across the screen rather than 1. If that is the case, size each of your columns as 6 for this device size. Please see the image below:
We can also change the size of text across all of the device sizes:
Alignment
To illustrate how we can align rows both vertically and horizontally, I have set up 3 cards within a row, with a grey background. The row is selected, activating the row halo toolbar, allowing us to vertically and horizontally align the contents of the row:
Vertical alignment
We can vertically align the contents of a row to the start of the row, the centre, or the end. This can be done for each device size, using the row halo toolbar shown below:
Here are the results to illustrate how the vertical alignment changes the positioning of the contents of the row:
Horizontal alignment
We can horizontally align the contents of a row to the centre of the row, the end, with space around, or space in between. This can be done for each device size, using the row halo toolbar shown below:
Here are the results to illustrate how the horizontal alignment changes the positioning of the contents of the row:
Related Information
#responsive design #alignment #vertical alignment #horizontal alignment
Last modified 3mo ago
Copy link