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 [e-mail] 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.