> For the complete documentation index, see [llms.txt](https://design-packs.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://design-packs.gitbook.io/docs/fundamentals/global-section-settings/understanding-layout-settings-size-and-maximum-width.md).

# 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.