The Size and Position Panel is an advanced tool for modifying the Layout of Components. This can be used for Mobile Layouts as well as fixing Components with Static or Fluid anchor points.

Your computer screen and the viewport within your web browser are fluid windows that can change size and shape depending on the device being used and whether you are viewing in full-screen mode, have the bookmarks bar showing in the browser, etc.

When screen sizes vary, the DIGIDECK must decide what to do with your content to accommodate those screen size variables. The options below each address different kinds of behaviors the Component can follow when it runs out of room to stay where it was placed when the slide was being designed in edit mode:

This is a simple percentage-based positioning type that allows for the easiest way to quickly lay out a Deck, Presentation, or Slide. Components positioned using the Grid will scale relative to their distance from the edge of the viewport window. This means that if your slide is designed in Layout Mode while the canvas is relatively wider than it is tall, those components may stretch vertically when the slide is viewed in full screen (because the navigation and bookmark bars in your web browser are no longer taking up space, so the screen scales more vertically than it will horizontally).

Stack positioning sets the component to be able to stack with and next to other components when they run out of horizontal screen space. This is useful for making Mobile Layouts possible because Stacked Components expect that they will be asked to move into a “scrollable” page layout because it is likely they won’t have the same horizontal space they would on a computer or laptop screen. You can simulate this by pulling in the left and right sides of your browser’s viewport window until it is about ¼ the size of the full screen.

This is the most advanced position type and allows for the fullest customization for Layout with Components. Anchor allows for each side of the Component to be set to a different value for when the screen resizes so that things stay in a predictable place on the slide no matter how much space the screen has. This is commonly used in menu layouts or navigation arrows, for example, because no matter what the screen size becomes we always want the menu and arrows to stay in one place and be the same size so they can be used for navigation.