The examples above demonstrate real-world techniques to create documents with responsive elements. After selecting one of the examples above, resize your browser window to see how elements react to your browser size, and click the “Show/Hide Pinning & Scaling Settings” button to view each element’s settings.
Show/Hide Pinning & Scaling Settings
Elevator to at NE corver 14 St & 4 Av
14 Street Union Square Station
This layout features pinned and scaled content. Resize your browser to see how each element behaves, then click the button in the upper right hand corner to see the pinning and scaling settings on each element. When an element is pinned to opposing edges, the element’s location changes so the proportion of the distance from the element’s center to the opposing edges is always preserved. The best example for this case is element centering: an element that is centered between the right and left edges and is also pinned to those edges will always be centered regardless of how the document’s size changes. A more complex example is an element in a 1000px wide document whose center is 200px from the left edge and 800px from the right edge. When this element is pinned to both edges and the document has width scaling enabled, the element’s center will always be positioned so that 20% of the document’s width is between itself and the document’s left edge while 80% of the distance is between itself and the right edge.