In this article, we will show you how to make all your SharePoint and Office 365 classic sites responsive and mobile friendly in one click, without any coding and without editing master pages.


Btw, you do not have to create new sites. This feature will also work on your existing sites and pages.


Be prepared for pure magic :)


Prerequisites:

  1. ShortPoint is installed in your environment
  2. You are working with Classic Sites (Modern Sites are responsive by default, this is why the Theme Builder for Modern Pages does not have this feature included).

The Problem

SharePoint classic sites by default are not responsive and mobile friendly. When you open your SharePoint classic site in mobile, you will see horizontal scrolling and the same design as in desktop. The desktop view will be used to show your SharePoint sites in mobile.


Making SharePoint Responsive In One Click

This is what we are going to do now, make all classic SharePoint sites responsive and look beautiful on mobile devices using ShortPoint.


Step 1: Activate ShortPoint Theme Builder

  • In the root site of your site collection, navigate to Site Settings > ShortPoint Dashboard > Theme Builder Classic
  • This will activate ShortPoint Theme Builder.



Step 2: Activate Responsive Website Feature

  1. In ShortPoint Branding panel on the left side of your screen, navigate to General Settings - General Layout.
  2. Then, enable Responsive Website feature.
  3. Click Publish!
  4. Yes, that's it :)



There is even more!

#1 You can control how your SharePoint site will look on mobile. Yes.

In ShortPoint branding tool, navigate to Mobile Settings.

You will be able to control basically everything from there, for example, you can redesign the mobile menu (hamburger menu):



#2 Use ShortPoint Page Builder (ShortPoint Inserter) to design a page with different views based on the device


We call this feature ShortPoint Visibility.



Add Section design element to the top of the page for example, and make it hidden on all devices except desktop. Then create another section that will be disabled on other desktop and enabled on all other devices.