title: Recreate the Manual Resizer in Browser WebDev Tools Responsive Design Panel
body: <p>I'm trying to recreate the manual resizing feature found in Chrome WebDev tools when testing responsive layouts.</p>
  <p><em>Before you ask, I'm doing this so I don't have to explain to every HR/headhunter/non-layperson how to manually resize their browser or how to use devtools.</em></p>
  <p><img src="https://i.imgur.com/bWJVv4z.png" alt="" /></p>
  <p>I am using an iframe with css/javascript to resize the iframe, and using the css property/value <code>resize: both</code>, but it's not evident that the iframe is resizable and the page is scrollable without adding directions like &quot;Hover over template to scroll down, resize (bottom right corner) to view adjust layout&quot;; that seems clunky, so I'd like this to be more intuitive.</p>
  <p><img src="https://i.imgur.com/c3MQAqp.png" alt="" /></p>
  <p>Is it possible to do this? I've searched online but I have a feeling I am using the wrong nomenclature for the resizing feature in webdev tools. I googled &quot;drag and drop&quot; and didn't find anything.</p>