Device Preview and Responsive Design
Test how your website looks on different screen sizes directly in the editor.Device Options
Desktop
- Full width preview
- Default editing view
- Shows complete layout
Tablet
- 768px width
- iPad-like view
- Tests medium breakpoint
Mobile
- 375px width
- iPhone-like view
- Tests mobile layout
Switching Devices
- Find device buttons in toolbar
- Click desired device
- Preview resizes immediately
- Edit in any view
What to Check
Desktop
- Full navigation visible
- Multi-column layouts
- Large images display
- Hover effects work
Tablet
- Navigation adapts
- Columns may stack
- Touch-friendly buttons
- Readable text
Mobile
- Mobile menu works
- Single column layout
- Tap targets adequate
- Fast loading
Responsive Elements
Lindo AI creates responsive designs:- Navigation - Collapses to hamburger
- Grids - Stack on smaller screens
- Images - Scale appropriately
- Text - Remains readable
Testing Tips
Visual Check
- No horizontal scroll
- Text not too small
- Images not cut off
- Buttons accessible
Functional Check
- Links work
- Forms usable
- Menus open
- Animations smooth
Content Check
- All content visible
- Nothing hidden
- Proper hierarchy
- Clear CTAs
Common Issues
Text Too Small
Use AI to adjust:Elements Overlapping
Navigation Issues
Best Practices
- Design mobile-first when possible
- Test all breakpoints
- Check real devices too
- Prioritize mobile experience