Responsive in the core, not the theme: how Element Node handles mobile
Columns stack by themselves under 768px, headings scale fluidly, and each column can opt out or hide per device. No hand-written media queries.
Most page builders treat mobile as an afterthought: you build the desktop layout, then spend hours fixing tablet and phone versions breakpoint by breakpoint. Element Node makes a different choice: responsive behavior lives in the rendering engine, not in each element's settings.
The right default
Under 768px, without you doing anything:
- Columns in every section stack vertically, in the order you laid them out
- Headings scale down on a fluid scale, with no clipping or overflow
- Sections adapt their padding to the screen edges
- Images never escape their container
This covers 90% of cases without opening a single settings panel. A site built for desktop is already readable on a phone.
Control when you need it
For the other 10%, three levers per column:
- Custom mobile width: a column can keep a partial width instead of going full-width — useful for side-by-side logos or icon grids that should stay 2×2
- Hide on mobile: heavy decorative elements that serve no purpose on a phone
- Hide on desktop: phone-only content, like a "call now" button
Why the core and not the theme
When responsive lives in the engine, every site and every future widget inherits it for free, and updates improve it retroactively for everyone. When it lives in the theme or per-widget settings, every page is its own special case — and that's how sites break on phones one widget at a time.