Preview Your Site in Mobile

Many browsers have a built-in tool that automatically adjusts a preview of your page to a variety of preset screen sizes.

The following steps are for two popular browsers, Windows Firefox and Chrome, but other browsers will likely have a similar tool.

1. Go to the page of interest in your browser.
2. Open the Inspect mode, usually by right-clicking on the page and then select Inspect or Inspect Element.
3. A new screen will open, probably below your UBCMS page, but this screen can be moved around or expanded.
4. In this inspection screen, look for a small 'Toggle Device Toolbar' button. For Firefox this is in the upper left. Chrome places it in the upper right.
5. Engage that button and your page will reload in a mobile device view (small screen-size). You may need to refresh the page.
6. At the top of the screen there will usually be a list of different sized devices so you can test a variety of screen sizes. Swicth between them to see a preview of your page in that screen size; e.g. we suggest iPhone 6/7/8 as a common medium-sized device.
7. These previews do not allow for the device's browser top and bottom toolbars, so for a more accurate fit, use the Edit feature to shrink the preview even farther. The iPhone 6/7/8 would be 375x550 pixels.
   
8. Click the button again in the inspect screen to turn this mode off.

For a page in Author, before you switch to the Inspect mode, edit the URL in the browser location bar to strip away the Sidekick, Content Finder and some of the other extra code:

• delete the cf#/
• add ?wcmmode=disabled
• e.g.
  https://ubcms-author.buffalo.edu/cf#/content/www/cmshelp.html
• will become
  https://ubcms-author.buffalo.edu/content/www/cmshelp.html?wcmmode=disabled
  

If you navigate away from the page, you will probably have to adjust the new page's URL in a similar way.