In Content Designer, section sizing is content-driven. This means the height of a section is not fixed and depends on the elements inside it.
The selected section size, small, medium, or large, only defines vertical padding, which is the space above and below the content inside a section. It does not define the final section height.
Default Section Sizes Without Content
The following values show the minimum section height when no content is added. The section size increases automatically when content is added.
Desktop
Sections always span the full width of the viewport, the visible area of the browser window, on desktop devices. For example, approximately 1440 px.
| Size | Total Height | Vertical Padding | Width |
| Small | 160px | 40px + 40px | 1440px: 100% viewport |
| Medium | 240px | 80px + 80px | 1440px: 100% viewport |
| Large | 400px | 160px + 160px | 1440px: 100% viewport |
Mobile
Vertical padding of a section remains the same on mobile. Only the width changes. For example, using ~375px as the standard mobile reference:
| Size | Total Height | Vertical Padding | Width |
| Small | 160px | 40px + 40px | 375px: 100% viewport |
| Medium | 240px | 80px + 80px | 375px: 100% viewport |
| Large | 400px | 160px + 160px | 375px: 100% viewport |
After you add content to the section, the height exceeds the above-listed values.
Image Guidelines for Sections
When adding images to sections, follow these guidelines:
- Image resolution: Use high-resolution images. A width of at least 1440 px is recommended
- Image height: Avoid fixed-height designs
- Aspect ratio: Use flexible aspect ratios, such as 16:9 or wider
- Safe area: Keep important content centered
Place key content in the center to avoid cropping across devices.
Quick Links Block
The Quick Links widget uses a fixed layout. The image height is fixed, while the image size depends on the selected column layout and viewport size.
- Image height: 140px
- Card height: 214px
- Image width: Fills the column 100%
Place key content in the center to avoid cropping across devices.
1-Column Layout
| Breakpoint | Image Size |
| Mobile (< 768px) | 335 × 140px |
| Tablet (768px–1439px) | 728 × 140px |
| Desktop (≥ 1440px) | 1300 × 140px |
2-Column Layout
| Breakpoint | Image Size |
| Mobile (< 768px) | 335 × 140px |
| Tablet (768px–1439px) | 356 × 140px |
| Desktop (≥ 1440px) | 642 × 140px |
Comments
0 comments
Please sign in to leave a comment.