It’s essential that your sales and opt-in pages look great on all screen sizes. There are various ways to to do this, but one of the quickest is to use your web browser’s developer tools.
This article will look at doing this with Google Chrome as it’s by far the most popular browser.
Before getting into the nitty gritty of this, you need to know that occasionally this feature won’t work as expected and pages may seem to behave strangely when viewing at smaller screen sizes. Make sure you read the final note at the end of this article if you encounter such a problem.
On Windows, press Ctrl+Shift+C keys or Cmd+Shift+C keys on a Mac. You can also open the panel by clicking the three dots button at top right of the browser, then More Tools and then Developer Tools.
Click the small devices icon at the top left of the panel that opened. On Windows you can also press Ctrl+Shift+M or Cmd+Shift+M on a Mac.
Note that when emulating larger screen sizes, the window may automatically zoom and resize the page content. You can click on the zoom control and manually adjust the setting using the drop down menu.
There are several ways to adjust the screen size. You can click and drag any of the resizing handles found on the bottom right and bottom-right corner of the screen. Note: You may have to manually reset the zoom setting.
You can click on different points of the top bar and jump to some common preset screen sizes.
Just above the top bar is a drop down with a list of mobile devices. Just click on an entry in the Dimensions list to resize the screen to the dimensions of that device. Note: You can click the Edit… entry at the bottom of the list and save your own preferred screen sizes to reuse in the future.
Finally, you can manually enter screen width and height values into the input fields. If the fields are grayed out and you can’t edit them, reset the Dimensions control to Responsive.
Does your page look odd?
In some cases, your page may not display at the smaller screen sizes in the way you expect. If that’s the case for you, it’s always worth checking the page on a real phone. While this process is generally reliable, occasionally it will look different to a real mobile device.
That screenshot above shows a Wikipedia page using the emulation in Chrome. You should be able to see that at a small screen size, it is showing the desktop page layout. If you check the same page on mobile, you should see that it displays with a different single column layout.