The latest articles on DEV Community by Mohammed Faizan Ahmed (@mdfaizanahmed786). https://dev.to/mdfaizanahmed786 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F812692%2Ff8d9c67f-6a17-4c44-9d6a-2ba3bd6c93e1.jpg https://dev.to/mdfaizanahmed786 en Mohammed Faizan Ahmed Sun, 06 Sep 2026 15:40:02 +0000 https://dev.to/mdfaizanahmed786/i-built-a-free-responsive-tester-because-devtools-only-shows-one-device-at-a-time-a51 https://dev.to/mdfaizanahmed786/i-built-a-free-responsive-tester-because-devtools-only-shows-one-device-at-a-time-a51 <p>DevTools responsive mode has one limitation that's never been fixed: you see one device at a time.</p> <p>You check iPhone. Looks fine. Switch to iPad. Fix padding. Switch back to iPhone. Was the header already broken or did you just break it?</p> <p>I got tired of holding layouts in my head, so I built a tool that shows all three at once.</p> <h2> <a href="https://responsivetool.com" rel="noopener noreferrer">Responsive Tool</a> — free, no signup </h2> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fx2z7a4wzqrgu6p5wu4ve.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fx2z7a4wzqrgu6p5wu4ve.png" alt="It shows the landing page of the tool of tailwindcss website in three different panes" width="800" height="381"></a></p> <p>Paste a URL → phone, tablet, and desktop load at one time. That's it.</p> <p>A few things that make it actually useful day to day:</p> <ul> <li>Swap one pane to a different device without losing the other two</li> <li>Refresh one pane after a code push — no need to reload everything</li> <li>Share your exact setup via URL — a teammate sees the same device comparison you do</li> <li>Sync scroll across all panes with a one-line script snippet</li> <li>Every viewport is a <a href="https://responsivetool.com/devices" rel="noopener noreferrer">real verified CSS size</a>, not a guess</li> </ul> <p>No account. No extension. No download. Runs in the browser. I don't see or store the URLs you test.</p> <p>Also: way more sites block iframes via X-Frame-Options than you'd think. I tested ~60 real sites — 93% of developer portfolios loaded fine, but only 44% of framework/marketing sites did. If your site doesn't load, that's the server blocking iframes, not a bug in the tool.</p> <p><strong>Stack</strong></p> <p>Next.js 16 · React 19 · TypeScript · Tailwind v4 · Cloudflare Workers</p> <p><strong>Bonus</strong></p> <p>I also built a <a href="https://responsivetool.com/breakpoints" rel="noopener noreferrer">CSS breakpoints reference</a> that maps common breakpoints to real device viewports. Handy even without the tool.</p> <p>👉 <a href="https://responsivetool.com" rel="noopener noreferrer">responsivetool.com</a></p> <p>What do you use for responsive checking? Still just DevTools? I want to know what I'm up against.</p> showdev webdev css beginners