- Docs
- Guides
Guide
Mobile layouts
Many Opaline sections can be tuned for phones without touching the desktop layout.
How mobile settings work#
Mobile size settings multiply the desktop size: 100% keeps the desktop size, higher enlarges, lower shrinks — on phones only. Set the desktop first, then switch the editor preview to mobile and adjust.
| Section | Mobile settings |
|---|---|
| Image / video banner | Image (mobile), eyebrow, heading and text sizes, button scale. |
| Full-screen hero | Mobile image, and whether the video plays on mobile. |
| Statement with images | Sentence size and line spacing on mobile. |
| Floating showcase | Position and width of each image on mobile. |
| Multiple columns | Columns on mobile, and a swipeable row. |
| Product grid | Columns, title sizes and breadcrumbs on mobile. |
| Testimonials | Carousel on mobile, columns on mobile. |
| Header | Padding on mobile. |
Tip
On phones, product galleries become swipeable carousels, and the quick view panel rises from the bottom of the screen.