# Understanding Layout Settings: Size & Maximum Width

Learn how to effectively use Size and Maximum width settings together to create responsive layouts that look great on all devices.

### How They Work Together

#### Size Setting

* Expressed as a percentage (e.g., 95%)
* Controls how much of the screen width the section uses
* Particularly important for mobile views
* Applies to all screen sizes until Maximum width is reached

#### Maximum Width Setting

* Expressed in pixels (e.g., 1200px)
* Sets an absolute limit on how wide the section can get
* Prevents sections from becoming too wide on large screens
* Only takes effect when the Size percentage would exceed this width

### Recommended Approach

#### Step 1: Set a Large Size

```
Set Size to 90-95%
Why:
- Ensures content is wide and readable on mobile
- Maintains consistent margins on smaller screens
- Prevents content from feeling cramped
```

#### Step 2: Control Desktop Width

```
Set Maximum width to 1200-1400px
Why:
- Prevents content from stretching too wide
- Maintains readability on large screens
- Creates a professional, contained layout
```

### Best Practices

1. Start with a large Size (90-95%)
2. Set Maximum width based on content type
3. Test on multiple screen sizes
4. Consider content readability
5. Maintain consistent spacing

### Recommended Maximum Widths

#### By Content Type

* Text-heavy content: 1000-1200px
* Product displays: 1200-1400px
* Images with text: 1200-1400px
* Full-width imagery: 1400-1600px
* Banners and heroes: 1400-1600px

### Common Issues

#### Content Too Narrow on Mobile?

```
Solution: Increase Size percentage
Example: 80% → 95%
```

#### Too Wide on Desktop?

```
Solution: Decrease Maximum width
Example: 1600px → 1200px
```

Need help? Contact our support team at <support@design-packs.com> for assistance.

> **Pro Tip:** Always start with a large Size percentage (95%) and then use Maximum width to control the desktop experience. This ensures your content looks great across all devices.


---

# 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://design-packs.gitbook.io/docs/fundamentals/global-section-settings/understanding-layout-settings-size-and-maximum-width.md?ask=<question>
```

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.