Preview the mobile version of your site

The Mosaic website theme is responsive, which means it is designed to reflow page content in response to the size of the screen the site is being viewed on. While editing pages, we recommend you take time to review the way the content appears on mobile devices (phones and tablets).

The best way to review responsive behaviour is by using your browser's mobile device emulator within its developer tools. See below for how to open the device emulator on each of the browsers that Mosaic supports.

Open mobile preview in Chrome or Edge

1. Press either the Ctrl + Shift + I key combination or the F12 key on your keyboard to access the Developer Tools
2. Press Ctrl + Shift + M on your keyboard or select the Toggle Device Emulation icon on the DevTools top ribbon to open the device toolbar:

3. Click the browser's refresh button to reload the page and make sure you're seeing the mobile view of the page
4. Click on the device toolbar and choose the mobile device that you want to emulate:

Open mobile preview in Firefox

1. Press Ctrl + Shift + M on your keyboard to open the device toolbar
2. Click the browser's refresh button to reload the page and make sure you're seeing the mobile view of the page
3. Click on the device toolbar and choose the mobile device that you want to emulate

Open Responsive Design Mode in Safari

1. Make sure the 'Develop' option is visible in the menu (if 'Develop' isn't visible, go to Safari > Preferences > Advanced; tick the 'Show Develop menu in menu bar' box)
2. Press Ctrl (^) + Cmd (⌘) + R to open Responsive Design Mode
3. Click the browser's refresh button to reload the page and make sure you're seeing the mobile view of the page
4. Choose the mobile device that you want to emulate