Responsively Previewing your Public Website WordPress Web Page

In Firefox:

1. In WordPress, click the Preview button in the Publish sidebar.
   
2. When the preview page loads, type Ctrl-Shift-M or click on Tools > Web Developer > Responsive Design View in the Firefox toolbar.
3. Use the built-in presets to view the page as it would appear on various devices.
   

Tips

• Scroll down your page with the built-in scroll bar.  You can also use your mouse track wheel when your mouse arrow is positioned over your page content.
• To see a rotated version of a device layout, click once on the change orientation icon.  Click again to restore the original orientation.
• You can also drag the handles to the right, bottom, and at the bottom-right corner to resize the view. When you do so, the header bar will display the current size.
• You can click on links to go to another page, and navigate around the preview site.

In Chrome:

1. In WordPress, click the Preview button in the Publish sidebar.
   
2. When the preview page loads, type Ctrl-Shift-I or click on the three vertical dots at the top right of your Chrome window, then More Tools > Developer Tools.
   
3. When the Developer Tools console loads, type Ctrl-Shift-M or click the Toggle Device Toolbar button at the top left of the console.
   
4. Use the built-in presets to view the page as it would appear on various devices.
   

In Edge:

1. In WordPress, click the Preview button in the Publish sidebar.
   
2. When the preview page loads, type F12 or click on the three horizontal dots at the top right of your Edge window, then More Tools > Developer Tools.
   
3. Click the “More” drop-down toggle in the Developer Tools header and click  Emulation.
   
4. Choose a preset from the Device list or choose Custom to enter a specific resolution.
   

In order to use “Responsive Design Mode” in Safari, you’ll need to first enable Safari’s Developer Mode. To do so, in Safari:

1. Click Safari > Preferences.
2. Click the Advanced tab in the Preferences window.
3. Check the Show Develop menu in menu bar checkbox.
   

Once you’ve done the above steps, you can use Responsive Design Mode. To do so, in Safari:

1. In WordPress, click the Preview button in the Publish sidebar.
   
2. When the preview page loads, click Cmd-Option-R or click on Develop > Enter Responsive Design Mode in the menu bar.
3. Click on the various presets to see how the page will look on those devices.