Responsive Design
Every uLanding site is responsive — it automatically adapts to look great on desktops, laptops, tablets and phones. This page explains how it works and how to fine‑tune it.
Tip Over half of web traffic is on phones. Always check your pages on mobile before publishing.
How responsiveness works
uLanding uses a fluid grid that rearranges content based on screen width:
- Multi‑column sections stack vertically on smaller screens.
- Text sizes and spacing scale down on phones.
- Menus collapse into the off‑canvas (hamburger) menu on mobile.
- Images scale to fit their container.
You don't have to design separate mobile versions — it happens automatically. You can refine the result with the controls below.
Device breakpoints
uLanding adapts at these common widths:
| Device | Approx. width | What changes |
|---|---|---|
| Desktop | 1200px+ | Full multi‑column layouts. |
| Laptop | 992–1199px | Slightly tighter spacing. |
| Tablet | 768–991px | Columns reduce (e.g. 4 → 2). |
| Mobile | < 768px | Columns stack to 1; menu collapses to off‑canvas. |
Previewing responsive layouts
In the Page Builder
Click the Responsive Preview toggle in the toolbar to preview phone and tablet widths without leaving the builder.
Screenshot: Page Builder responsive preview toggle
In the Theme Customizer
The live preview can be switched between desktop, tablet and phone widths.
On a real device
The truest test: open your live site on your actual phone and tablet.
Hiding content per device
In the Widget Builder, every widget's Advanced tab has:
- Hide on desktop
- Hide on tablet
- Hide on mobile
Use these to remove non‑essential widgets on small screens for a cleaner mobile experience.
Example Hide a large decorative widget on mobile so the footer stays compact on phones.
Container width
Your site's maximum width is set in Customizer → General → Site width, and each theme has its own container size. Wider containers feel spacious on big screens; the content still narrows gracefully on small ones.
Responsive best practices
- Test every page on mobile before publishing.
- Keep headlines short — long titles wrap awkwardly on phones.
- Use generous tap targets — buttons should be easy to press with a thumb.
- Don't overload sections — fewer columns stack more cleanly.
- Compress images — mobile users often have slower connections.
- Check the menu — make sure your off‑canvas menu contains everything important.
- Mind the hero — ensure the headline and button are visible without scrolling on a phone.
- Avoid tiny text — keep your base font size at 16px or more.
Common responsive issues
| Problem | Fix |
|---|---|
| Text overflows on mobile | Shorten headlines; reduce font size for that block. |
| Columns don't stack | Save the block; very custom layouts may need fewer columns. |
| Image too large on phone | Use a smaller/optimized image. |
| Menu items cut off | Reduce top‑level menu items; rely on the off‑canvas. |
| Buttons too close together | Add spacing/padding in the block's design controls. |
| Horizontal scrolling appears | Usually an oversized image or fixed‑width element; check recent edits and custom CSS. |
Continue to Localization.