Skip to content

Using the Browser’s Mobile Preview

Adapt courses are responsive — meaning that the course will adapt and adjust to work well on nearly any tablet or phone. However, when the course responds to screen size, many of the sections transform in ways that may or may not work with your content.

To deal with this, browsers have added features that let developers view their work on a variety of devices right from the browser.

In this article, we’ll introduce browser “Dev Tools” and show you how to enter “responsive design mode” in Google Chrome.

This is an advanced technique using profesional development tools. You may have difficulty using these tools and while we use these ourselves often, we don’t support them.

Chrome Tools menu

Opening Dev Tools in Google Chrome

To open Dev Tools in chrome locate the browser’s menu button at the right side of the window, just after the URL bar. From there, select More Tools then select Developer Tools.

When Dev Tools open, they may not look exactly the same as the image below — the panel may open on the bottom of the window or on the right side of the window. You may also notice that some of the information may be different — that’s okay. We’ll be using a section of the tools that’s fairly consistent and easy to find. Don’t let the panel overwhelm you.

Dev Tools open

Regardless of placemement, once Dev Tools opens locate the icon to “Toggle device toolbar.” It’s circled in the image above and looks like a tablet and phone. Pressing that buttton will reveal a new toolbar at the top of your brower. Again, your screen may look differently than the one here.

Responsive toolbar open

Congratulations, you’re viewing your adapt course as a different device. When the responsive view first opens, you may be viewing a different device than shown in the image. You can set which device you are using by making a selection from the dropdown (it says “Responsive” in the screen shot above). The dropdown has a list of many of the most common devices (including most iPhone and android phones and tablets). There are a a number of options in the other menus (many you won’t need for previewing a course); Feel free to play with them.

When you’re ready to leave this responsive view, you can close Dev Tools using the “x” at the right of the panel. You can also close the browser tab.