Responsive Design
Learn how to use the dinter to test your responsive design.
Responsive design is a design approach that makes web pages render well on a variety of devices and window or screen sizes. dinter supports testing responsive design by utilizing the browser's responsive devtools.
How to test responsive design
Step 1: Check the design dimensions
To test responsive design first go to Figma and check the dimensions of the design. Then click 'Copy as PNG' for the frame you want to compare.
Step 2: Change the browser's dimensions
Switch back to your frontend app, and open the browser's device toolbar.
On Chrome: Open inspect and hit CMD+SHIFT+M
Match the dimensions of the design with the browser's device toolbar.
Step 3: Compare
Activate the dinter extension, hit listen to paste, and paste with CMD+V.
If still needed adjust the scale in dinter controls.