Responsive Design in Titan Web: Breakpoints, Units, and Device-Specific Properties
Responsive Design in Titan Web: Breakpoints, Units, and Device-Specific Properties
Titan Web projects must work on desktop, tablet, and mobile. Titan provides a breakpoint system and device-specific property overrides that give you full control over how every element renders at every screen size. Here is how to use them effectively.
Titan’s Breakpoint System
| Breakpoint | Code | Min Width | Target |
|---|---|---|---|
| Large | lg | 1024px | Desktop |
| Medium | md | 768px | Tablet landscape |
| Small | sm | 576px | Tablet portrait |
| Extra small | xs | 384px | Mobile |
When you design a Titan page, you design for lg first (desktop), then adjust for smaller breakpoints. Titan cascades properties downward – anything you set on lg applies to all smaller sizes unless explicitly overridden.
Dynamic Viewport Units
Titan supports modern CSS units including dvh (dynamic viewport height) which accounts for mobile browser chrome (address bar, bottom nav). Use these for full-height layouts:
- Header strip: 12dvh (minimum 72px) – enough for logo + navigation
- Footer strip: 6dvh (minimum 56px) – copyright and links
- Body strip: 100dvh minus header minus footer – fills the remaining viewport
- Minimum page height: 400px – prevents collapsed layouts on unusual viewports
Device-Specific Property Overrides
Every Titan element stores properties per device. This means you can set a 3-column grid on desktop and a single column on mobile without creating separate elements. The property structure follows this pattern: the desktop (lg) value is the default, and you override only what changes on smaller devices.
Common overrides by breakpoint:
- Grid columns: 3 on lg → 2 on md → 1 on xs
- Font size: 48px hero title on lg → 32px on sm → 24px on xs
- Padding: 60px section padding on lg → 32px on sm → 20px on xs
- Visibility: hide decorative images on xs to save bandwidth
- Navigation: horizontal menu on lg → hamburger on sm
Best Practices
- Always preview on all 4 breakpoints before publishing – the Titan builder has a device switcher in the top bar
- Use relative units (%, dvh, em) over fixed px wherever possible
- Test forms on real mobile devices – input fields, dropdowns, and date pickers behave differently on iOS and Android
- Set minimum heights on strips to prevent content from collapsing on small screens
- Use objectFit: contain on images to preserve aspect ratio across all breakpoints
Related Articles
Explore Our Services
Need a responsive Titan portal? Contact Titanixforce – we build pixel-perfect experiences across every device.