Y
YourIndieTechLab
File Operations
Dev Tools
Data Toolkit
Data Testing
UI Testing
Suggest a Tool
About
Light
Responsive Breakpoint Tester
Paste HTML/CSS and preview how it renders at different device widths.
iPhone SE
375
iPhone 14 Pro
393
iPad Mini
768
iPad Pro
1024
Laptop
1280
Desktop
1440
Custom
375 × 667
HTML / CSS
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: system-ui, sans-serif; padding: 20px; background: #f8fafc; } .container { max-width: 800px; margin: 0 auto; } h1 { font-size: clamp(1.5rem, 4vw, 2.5rem); color: #1e293b; margin-bottom: 16px; } p { color: #64748b; line-height: 1.6; margin-bottom: 16px; } .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-top: 24px; } .card { background: white; border-radius: 12px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); } .card h3 { font-size: 14px; color: #1e293b; margin-bottom: 8px; } .card p { font-size: 13px; color: #94a3b8; margin: 0; } .nav { display: flex; gap: 16px; padding: 12px 0; border-bottom: 1px solid #e2e8f0; margin-bottom: 24px; flex-wrap: wrap; } .nav a { color: #3b82f6; text-decoration: none; font-size: 14px; } </style> </head> <body> <div class="container"> <nav class="nav"> <a href="#">Home</a> <a href="#">Products</a> <a href="#">About</a> <a href="#">Contact</a> </nav> <h1>Responsive Layout Test</h1> <p>Resize the viewport to see how this layout adapts to different screen sizes. The grid below uses auto-fit to reflow cards.</p> <div class="grid"> <div class="card"><h3>Feature One</h3><p>Description of the first feature with enough text to wrap.</p></div> <div class="card"><h3>Feature Two</h3><p>Another card that will reflow based on available space.</p></div> <div class="card"><h3>Feature Three</h3><p>Third card to demonstrate the grid behavior at breakpoints.</p></div> <div class="card"><h3>Feature Four</h3><p>Fourth card for testing narrow viewport stacking.</p></div> </div> </div> </body> </html>
HTML / CSS
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: system-ui, sans-serif; padding: 20px; background: #f8fafc; } .container { max-width: 800px; margin: 0 auto; } h1 { font-size: clamp(1.5rem, 4vw, 2.5rem); color: #1e293b; margin-bottom: 16px; } p { color: #64748b; line-height: 1.6; margin-bottom: 16px; } .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-top: 24px; } .card { background: white; border-radius: 12px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); } .card h3 { font-size: 14px; color: #1e293b; margin-bottom: 8px; } .card p { font-size: 13px; color: #94a3b8; margin: 0; } .nav { display: flex; gap: 16px; padding: 12px 0; border-bottom: 1px solid #e2e8f0; margin-bottom: 24px; flex-wrap: wrap; } .nav a { color: #3b82f6; text-decoration: none; font-size: 14px; } </style> </head> <body> <div class="container"> <nav class="nav"> <a href="#">Home</a> <a href="#">Products</a> <a href="#">About</a> <a href="#">Contact</a> </nav> <h1>Responsive Layout Test</h1> <p>Resize the viewport to see how this layout adapts to different screen sizes. The grid below uses auto-fit to reflow cards.</p> <div class="grid"> <div class="card"><h3>Feature One</h3><p>Description of the first feature with enough text to wrap.</p></div> <div class="card"><h3>Feature Two</h3><p>Another card that will reflow based on available space.</p></div> <div class="card"><h3>Feature Three</h3><p>Third card to demonstrate the grid behavior at breakpoints.</p></div> <div class="card"><h3>Feature Four</h3><p>Fourth card for testing narrow viewport stacking.</p></div> </div> </div> </body> </html>