# Shared Layout Settings *Skill Level: Intermediate* ## Before You Begin * Make sure you understand the [definitions and terms](/design/designing-your-app/definitions-and-terms.md). * Make sure you have read through the previous guides. ## Video {% embed url="" %} ## Walkthrough #### 1. To access the Shared Layout settings, click on a component, then click on the Layout tab.
#### 2. In the Layout tab you will see an options window called Shared Layout Settings with a few options. These options can change slightly based on if your selection is a group or an individual component.There are two main settings here with option for each: * **Scaling**: This controls how the group or component is resized when the screen size is made larger or smaller. * **Anchoring**: This controls how the group or component "latches onto" certain parts of the screen as it is resized. * **Positioning** (not visible): The location of groups or components on screen will be shared across screen sizes. Moving a group or component on one screen size will also change its location on all other screen sizes. We'll get into more detail about these below.
#### 3. Let's look quickly at a small decision tree to better explain which options appear in different circumstances. {% hint style="info" %} **NOTE**: Rectangles act as auto-groups for all components inside them, except components inside the rectangle do not inherit the option to **Scale with Group**. For more information see the article on [Grouping and Rectangles](/design/designing-your-app/grouping-components.md). {% endhint %}
#### 4. Now let's look at and define each of these option behaviors with some examples. #### Scaling Options Scaling refers to how the size of the group or component changes as the screen size grows or shrinks in width.
OptionDescription
Scales with ScreenCauses groups or components to get larger or smaller based on the screen size.
Scales with GroupCauses the component to match the scaling settings of its parent group, even if the group is set to "Stays Fixed".
Stays FixedCause the group or component size to stay the same regardless of screen size.
#### Anchoring Anchoring refers to the location of the group or component in the screen when the screen size grows or shrinks. | Option | Description | Example | | ------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | | Anchor Left (Stays Fixed) | Locks the distance between the element and the left side of the screen as it scales. Only available when "Stays Fixed" is selected. | ![](/files/qqoCISg1MdI3s2iAgSrF) | | Anchor Right (Stays Fixed) | Locks the distance between the element and the right side of the screen as it scales. Only available when "Stays Fixed" is selected. | ![](/files/sgUp2rJtq3d1Gmq9h9p1) | | Anchor Center (Stays Fixed) | Anchors the component to the center of the screen, but component does not resize as screen size grows or shrinks. | ![](/files/PGoF27DVt0yA14EvHLRi) | | Anchor Center (Scales with Screen) | Scales the distance between the component and both sides of the screen. | ![](/files/lkJFjrM74nfnukjc4QP4) | | Anchor Left and Right (Scales with Screen) | Locks the distance between the left and right sides of the screen as it scales. Only available when "Scales with Screen" or "Scales with Group" is selected. | ![](/files/QFzVPIZ76z5alREQDyW4) | #### 5. The toggles at the top of the Share Screen settings are used to "breakout" the settings for the selected group or component so that they do not share the same settings. When toggled off, a new menu appears below allowing you to change the Scaling, Anchoring, and Positioning independently of the Shared Screen Settings. We'll learn more about these [Custom Screen Settings](/design/designing-your-app/using-the-layout-tab/custom-layout-settings.md) in the next guide.
## Learn More * Turning off [responsive visibility](/design/designing-your-app/using-the-layout-tab/screen-size-visibility.md) for a component or group in a specific screen size will also disable its shared screen settings for that screen size. * Check out the Responsive Apps templates when creating a new app - they can help you learn how to create the best layouts possible! ## Help If you need additional help with this article, you can always ask in our[ community forum](https://forum.adalo.com/) or [hire an Expert](https://adalo.com/experts) to help! Be sure to paste the link to this article in your post as well! Do you have a tutorial or help doc request? [Let us know!](https://ideas.adalo.com/tutorial-requests) --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://help.adalo.com/design/designing-your-app/using-the-layout-tab/shared-layout-settings.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.