Adjust the Layout of a Component

At times there may be a need to adjust the layout of a component, whether it is to adjust the component width or to accurately stack components atop each other.

This need often comes into play when a component needs to be adjusted for mobile devices.

In addition to editing components, you also have the option to edit the layout of these components on a page. Select "Layout" from the top right dropdown menu. Single click on any components you wish to change the size or layout for, and you will see 2 blue dots for you to drag left or right. 

You will see the following tool bar options:

1. Parent (table icon) - For selecting the parent component of the selected component.
2. Float to new line (layers icon) - For floating the selected component to the next row/line.
3. Hide (eye icon) - For hiding the selected component on the current view. This is useful if you wish to show a different component on desktop versus mobile.
4. Handles for 2 Blue Dots - You can click and drag to the needed grid width.

To ensure your page looks good on mobile, use the emulator and switch to the one of the mobile devices (e.g. iPhone 8 Plus). You only have to edit the mobile view once because all mobile devices will inherit the same configurations.

Note that component configurations remain the same across devices while layout configurations do not. In other words, you can change the size or layout of components specifically for the mobile view. However, if you want to show a different component altogether for mobile, you would need to build a new component and use the "Hide" option to hide the desktop version (and vice versa for the desktop view).

Here is an example of image needing a width adjustment.  By grabbing the Handles and dragging, the width can be adjusted to more accurately fit a mobile device.

The example after the width adjustment.