Checking how your website displays across different devices

This video tutorial explains how to use the Google Chrome Developer Tools to see how your website displays across different devices. It’s really easy to check how your website looks on different size screens and mobile devices by simulating your website on a mobile phone in your Chrome browser.

Using the Chrome Developer Tools allows you to see how your webpages display on different screen devices without actually needing extra devices to test the pages on. It is particularly useful for testing how well a responsive site works and how the content adjusts for different screen sizes/resolutions.

You can also view this video on YouTube here.

To access the Chrome Developer Tools, click on the options button in Chrome, then More Tools, and then Developer Tools. You can then click on the little phone icon and select a device to ‘view’ the webpage on.

How to access Google Chrome's developer tools from the menu bar
How to access Google Chrome’s developer tools from the menu bar
Google Chrome's developer tools
Google Chrome’s developer tools