If you want to check how your site looks on mobile without using a phone, you can use your browser’s built-in developer tools. These tools include a responsive (mobile) view that lets you preview different screen sizes, simulate touch, and test layouts quickly.
This is especially useful when working in ShowOff, because you can open your page in preview or live mode and then switch your browser into a mobile viewport.
Before you start
In ShowOff, open the page you want to check.
View it in one of these ways:
Preview (recommended while editing), or
Open the published/live page in a new tab.
Keep that page open in your browser and follow the steps below for your browser.
Important note: Responsive mode is a very accurate layout preview, but it is not a perfect replacement for testing on real devices. Fonts, browser UI, and performance can still differ slightly on a real phone.
Google Chrome
Open Developer Tools
Right-click anywhere on the page and select Inspect
Or use:
Windows:
Ctrl + Shift + IMac:
Cmd + Option + I
Turn on Mobile (Responsive) View
In Developer Tools, click the device toolbar icon (it looks like a phone and tablet).
Or use:
Windows:
Ctrl + Shift + MMac:
Cmd + Shift + M
Choose a device or screen size
At the top of the page (above the site preview), you can:
Select a preset device (for example iPhone, Pixel)
Choose Responsive and set a custom width and height
Adjust the zoom percentage if needed
Useful extras
Rotate the view using the rotate icon (portrait/landscape)
Toggle touch simulation (usually enabled automatically in device mode)
Use the three-dot menu in the device toolbar to add options like:
Network throttling (simulate slower mobile connections)
Device pixel ratio (sharper preview)
Microsoft Edge
Edge uses the same tools as Chrome, so the steps are almost identical.
Open Developer Tools
Right-click on the page and select Inspect
Or use:
Windows:
Ctrl + Shift + IMac:
Cmd + Option + I
Turn on Mobile (Responsive) View
Click the device toolbar icon (phone/tablet)
Or use:
Windows:
Ctrl + Shift + MMac:
Cmd + Shift + M
Choose a device or screen size
Use the bar at the top to pick a device preset or set a responsive width.
Mozilla Firefox
Open Developer Tools
Right-click on the page and select Inspect
Or use:
Windows:
Ctrl + Shift + IMac:
Cmd + Option + I
Open Responsive Design Mode
Go to the Developer Tools and select Responsive Design Mode
Or use the shortcut:
Windows:
Ctrl + Shift + MMac:
Cmd + Option + M
Choose a device or set a size
In Responsive Design Mode you can:
Pick a device preset from the dropdown
Set a custom width and height
Change orientation (portrait/landscape)
Adjust zoom
Useful extras
Firefox also includes handy options for:
Touch simulation
Network throttling (depending on version/settings)
Screenshotting the responsive view
Safari (Mac)
Safari’s responsive tools require enabling the Develop menu first.
Step 1: Enable the Develop menu
Open Safari
Go to Safari > Settings (or Preferences on older versions)
Select Advanced
Tick Show Develop menu in menu bar
Step 2: Open Developer Tools
Right-click the page and select Inspect Element
Or use:
Cmd + Option + I
Step 3: Use Responsive Design Mode
Go to Develop > Enter Responsive Design Mode
Or use:
Cmd + Option + R
Choose a device or size
You can select Apple device presets and test different orientations and viewport sizes.
Tips for testing your ShowOff site in mobile view
Refresh after changes: If you make changes in ShowOff, reload the preview/live page in the responsive view to see updates.
Check key pages: Home, key landing pages, forms, navigation menus, and footer content.
Test breakpoints: Try a few widths, for example:
320px (small phones)
375px to 430px (common modern phones)
768px (tablet portrait)
Look for common issues:
Text too large or too small
Buttons too close together
Images not scaling correctly
Menus overlapping content
Horizontal scrolling (usually a sign something is too wide)
Comments
0 comments
Please sign in to leave a comment.