Understanding Container Width
What is container width?
Think of your content as being inside an invisible box. The container width is how wide that box can be. It's like setting the margins on a document—it controls how much of the screen your content uses from left to right.
Why does container width matter?
On a large desktop screen, if your content is too narrow, it can look cramped with lots of empty space on the sides. If it's too wide, text becomes hard to read because your eyes have to travel too far across the screen. The container width helps you find the sweet spot.
What does "global" mean in Global Container Width?
"Global" means this setting applies to your entire app—every page uses the same container width. You set it once, and it works everywhere.
How It Works
Where do I find the Global Container Width setting?
Go to Branding in your settings
Look for the Other section
You'll see the “Max Width” setting there
What is the default container width?
By default, your content is set to 706px (pixels) wide. This is a safe, readable width, but it can feel narrow on larger desktop screens, especially modern monitors.
What happens on mobile devices?
Nothing! This setting only affects how your content looks on desktop computers. Mobile devices automatically adjust to fit the screen perfectly, no matter what your container width is set to.
Does this affect my entire app?
Yes. Once you set the Global Container Width, it applies to all pages across your app. This creates a consistent look and feel throughout.
Choosing the Right Width
How wide should I make my container?
Most creators find that a width between 1000px and 1200px works best for modern desktop layouts. This gives your content room to breathe on larger screens while still maintaining good readability.
What if I want to use a narrower width?
You can, but there's a minimum width of 706px. If you try to enter anything smaller (like 500px or 600px), the system will automatically change it back to 706px to ensure your content remains readable.
How do I know what number to choose?
Here's a simple guide:
706px (default): Safe and readable, but may feel narrow on large screens
1000px: A good middle ground - more modern feel without being too wide
1200px: Spacious, great for multi-column layouts and visual content
Above 1200px: Very wide, best if you have lots of visual content or multiple columns
Can I test different widths before deciding?
Yes! Change the number, save it, and view your app on a desktop screen to see how it looks. You can always adjust it until it feels right.
Working with Layout Blocks
When you use Layout Blocks (which let you create columns), a wider container width gives those columns more room. For example:
At 706px, three columns might feel cramped
At 1200px, those same three columns have plenty of breathing room
Can I make individual sections narrower even with a wide container?
Yes! Even if your global container is set to 1200px, you can use Layout Block width settings to make specific sections narrower. This is useful for:
Keeping text-heavy sections readable (narrower is better for reading)
Making visual sections (like image galleries) take full advantage of the wider space
Example: When would I use both?
Imagine you set your Global Container Width to 1200px. You could then:
Have a blog post section limited to 800px (easier to read)
Have a photo gallery section use the full 1200px (show more images)
Have a pricing table use 1000px (fits three columns nicely)
Common Questions
Will changing this break my existing pages?
No. Your content will simply have more (or less) horizontal space to work with. Everything will still function normally—it just adjusts the width.
What if my content looks weird after changing the width?
You may need to adjust how you've arranged your content:
If you increased the width and things look too spread out, consider adding columns or adjusting your layout blocks
If things feel cramped, try a larger container width
Does this affect images?
Images will still display at their set sizes, but they'll have more horizontal space available if you've increased the container width.
Can I change this setting later?
Absolutely! You can adjust your Global Container Width anytime. Just go back to Branding → Other and update the number.
What if I'm not sure what width to use?
Start with 1000px—it's a safe choice that gives you more space than the default while still looking good on most screens. You can always fine-tune from there.
Quick Start Guide
I want my app to look more modern on desktop. What should I do?
Step-by-step:
Go to Branding → Other
Find Max Width
Change the value from 706px to 1000px or 1200px
Save your changes
View your app on a desktop to see the difference
Next steps:
If you use Layout Blocks, you now have more room for multi-column layouts
Consider using wider sections for visual content
Keep text-heavy sections at a readable width using Layout Block max width settings
Understanding Pixels (px)
What does "px" mean?
"px" stands for pixels. A pixel is a tiny dot on your screen. When we say 706px, we mean 706 pixels wide. Don't worry too much about the exact number—just know that higher numbers = wider content.
Is 1000px actually 1000 pixels?
Yes, but the actual size it appears depends on the screen. On a small laptop, 1000px might take up most of the screen. On a large desktop monitor, 1000px might only use half the screen width. The system handles this automatically.
Pro Tips
💡 Think about your content type
Lots of text? Stay closer to 706-900px for readability
Lots of images and visual content? Go wider (1000-1200px)
Multi-column layouts? Definitely go wider (1100-1200px)
💡 Check on different screen sizes
If possible, view your app on both a laptop and a larger desktop monitor after changing the container width to see how it looks in different contexts.
💡 You can always adjust
There's no "perfect" number that works for everyone. Try a width, use your app for a few days, and adjust if needed. It's easy to change!
💡 Combine with Layout Blocks
The real power comes when you use a wider container width AND Layout Blocks together. This lets you create professional, multi-column layouts that really shine on desktop.

