You can now configure layout within the theme
object of your portal. This gives you precise, declarative control over container alignment and maximum width—enabling cleaner, more responsive layouts with minimal effort.
This feature is only available inside the theme
object. Layout definitions in the legacy themeOverrides
object are not supported.
Purpose
The layout
object exists to:
- Set maximum widths for layout containers.
- Define horizontal alignment for content (
left
orcenter
). - Create visually balanced, readable layouts for desktop users.
How to Use It
Enable Layout Configuration
To activate layout control, define a layout
object under theme
:
theme: {
layout: {
mainContainer: {
maxWidth: '1250px', // or '80rem'
align: 'center', // or 'left'
},
content: {
maxWidth: '700px', // or '44rem'
align: 'left', // or 'center'
},
}
}
For full configuration details, see the theme layout configuration reference.
These settings are optimized for desktop viewports and are not applied on tablets and smaller devices to ensure the best experience across screen sizes.
Examples:
Below are the four different alignment variations applied while the mainContainer
has a maxWidth
of 1250px and the content
has a maxWidth
of 700px.
mainContainer = left
The mainContainer
is aligned to left
.
- Content : Left
- Content : Center
mainContainer = center
The mainContainer
is aligned to center
.
- Content : Left
- Content : Center