Viewport slider

The ability to make layout and design changes where needed is key to any responsive design. On wider screens, content might need to be placed next to each other instead of being stacked. Font sizes might need to be increased and small images replaced with larger ones. The Width Slider can be used to view the website at any possible width and help you decide if any such change will improve the user experience of the design.

Just grab the side handle along the middle of the canvas to move the slider left or right and see the viewport and canvas change. You can also click on the handle and move it left or right pixel by pixel with the keyboard arrow keys.

The current viewport width — the position of the slider handle — is visible below the Zoom tool. You can also switch the viewport measurements. Click the current breakpoints measure indicator to toggle between PX and EM.