Fixed Width Layout Demo
Current Layout Mode
Content always displays as mobile (375px)
Content Width
This content is constrained to 375px width.
All main content stays within this fixed width for consistency.
Scrolling Behavior
Only the main content area scrolls. Try scrolling down!
Section 1
This is sample content to demonstrate scrolling behavior. The sidebars remain fixed while this content scrolls.
Section 2
This is sample content to demonstrate scrolling behavior. The sidebars remain fixed while this content scrolls.
Section 3
This is sample content to demonstrate scrolling behavior. The sidebars remain fixed while this content scrolls.
Section 4
This is sample content to demonstrate scrolling behavior. The sidebars remain fixed while this content scrolls.
Section 5
This is sample content to demonstrate scrolling behavior. The sidebars remain fixed while this content scrolls.
Section 6
This is sample content to demonstrate scrolling behavior. The sidebars remain fixed while this content scrolls.
Section 7
This is sample content to demonstrate scrolling behavior. The sidebars remain fixed while this content scrolls.
Section 8
This is sample content to demonstrate scrolling behavior. The sidebars remain fixed while this content scrolls.
Section 9
This is sample content to demonstrate scrolling behavior. The sidebars remain fixed while this content scrolls.
Section 10
This is sample content to demonstrate scrolling behavior. The sidebars remain fixed while this content scrolls.
Section 11
This is sample content to demonstrate scrolling behavior. The sidebars remain fixed while this content scrolls.
Section 12
This is sample content to demonstrate scrolling behavior. The sidebars remain fixed while this content scrolls.
Section 13
This is sample content to demonstrate scrolling behavior. The sidebars remain fixed while this content scrolls.
Section 14
This is sample content to demonstrate scrolling behavior. The sidebars remain fixed while this content scrolls.
Section 15
This is sample content to demonstrate scrolling behavior. The sidebars remain fixed while this content scrolls.
Section 16
This is sample content to demonstrate scrolling behavior. The sidebars remain fixed while this content scrolls.
Section 17
This is sample content to demonstrate scrolling behavior. The sidebars remain fixed while this content scrolls.
Section 18
This is sample content to demonstrate scrolling behavior. The sidebars remain fixed while this content scrolls.
Section 19
This is sample content to demonstrate scrolling behavior. The sidebars remain fixed while this content scrolls.
Section 20
This is sample content to demonstrate scrolling behavior. The sidebars remain fixed while this content scrolls.
Responsive Features
- Mobile (< 830px): Single column, full-width up to 375px
- Tablet (830px - 1199px): Fixed left sidebar + 375px content
- Desktop (≥ 1200px): Fixed left/right sidebars + 375px content
Responsive Test
This text should always appear as text-sm (mobile size), not larger on bigger screens.
This padding should always be p-4 (1rem), not increase on larger screens.
The grid above should always be single column (mobile layout)