Responsive Testing with Codeply

How to test different viewport sizes in Codeply v2

It’s time to clarify responsive design testing with Codeply v2. Recently several users have asked how to change or set the viewport size to test their responsive designs. Codeply v1 had different viewport sizes available in the editor toolbar, and the ability to open the preview window in a new browser tab.

This same functionality exists in Codeply v2, and it’s effectively easier to use. There are 2 ways to change the preview viewport size in Codeply. Both are easier (and more relevant) to demonstrate from Vertical preview orientation.

  1. First, change the editor layout to Vertical. This is done by selecting the Vertical option in the layout menu in the top toolbar:
Image for post
Image for post

2. Now you can change the viewport size by dragging the vertical divider between the editor and preview panes.

3. Or, click the responsive screen icons at the bottom of the preview window.

Image for post
Image for post

That’s all there is to it. Keep on plying!

Codeply — The frontend design editor

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store