Set up your public website for mobile users

By default, your Office 365 public website is set up to display the same way on mobile devices as on a full-sized monitor, so phone and tablet users may have to do a lot of scrolling. However, it’s easy to change this: you can use a prebuilt mobile master page. Master pages provide a common navigation structure for all pages on your site. You can select a default master page and a master page to be used just when users view the site from a mobile device.

As soon as you change the mobile master page, people using mobile browsers will get a view that works for smaller screens:

Sample public website showing drop-down arrow for navigation and text that wraps on a small screen.

You’ll see two major differences: navigation is done as a drop-down list, and lines wrap to fit on the smaller screen.

The mobile master page is automatically applied to all pages in your website, so there’s no need to republish. It works with any theme. There is no separate URL: when people go to any page using a larger screen, they see one view of the site, and when people use a small screen, they see the new mobile view.

Add a mobile master page

  1. Go to Sites > Public Site, and then in your public website, click Settings Settings: update your profile, install software and connect it to the cloud.

  2. Select Site settings.

  3. In the Look and Feel section, select Master page.

  4. In the Any Mobile Device box, select any of the mobile master pages:
    Use one of the master pages that includes mobile in its name.

    Note    The four default mobile master pages provide the same layout, so you can use any of them.

  5. Click OK.

  6. Click Home to return to the home page of your site.

  7. To preview your page as it would look on a device, on the Page menu, select Preview, and then select Any Mobile Device.
    The Page menu, showing the Preview on Any Mobile Device option

    Important    If your browser blocks pop-ups, you’ll see a message “Internet Explorer blocked a pop-up.” Click Allow Once, click Retry, and then the preview opens in a new window.

  8. Drag a corner of the preview window in to make the preview browser window smaller, so it matches what you see on a mobile phone or tablet.

Need to customize the mobile layout?

If you create a new master page for your website, you may also want to create a new master page for the mobile view. For more information about creating master pages, see Use Design Manager with your Public Website in Office 365.

Learn more

To learn more about customizing your website and pages, see Public Website help for Office 365.

Applies To: SharePoint Online, SharePoint Online Website

Was this information helpful?

Yes No

How can we improve it?

255 characters remaining

To protect your privacy, please do not include contact information in your feedback. Review our privacy policy.

Thank you for your feedback!

Change language