Transcript

In this quick tip, we're going to learn about the "Align to parent" Container type. Child elements added to an Align to parent Container are pinned to a Nonant. A Nonant is like a quadrant, but instead of being divided into four parts, the parent Container is divided into nine parts. A new element added to this Container type will automatically pin to the nearest Nonant.

For example, I've added two shapes to my page which has a container layout of "Align to parent". Shape A is pinned to the top left and Shape B is pinned to the top right. When we resize the page in the Responsive tab, we can see these elements stay pinned to their assigned Nonant as the page grows and shrinks.

Align to parent is best used for solutions like here in this card element to display this icon in the top right. Unlike the Row container where elements will push and wrap, Align to parent will always keep its elements pinned to their assigned Nonant, even if this means two or more elements will overlap each other. This is important to keep in mind so you know when to use this layout type as you build a responsive page.

That's it for this quick tip! For more, be sure to check out bubble.io/academy.