Skip to main content

How to make SharePoint Site/Master page Responsive

Lets try to make a SharePoint site responsive. Making a SharePoint site responsive is a two way process.

  • Making Master page Responsive.
  • Making SharePoint page layouts responsive.
  • Making contents that is gonna load on the page responsive.
Note : I would recommend to use Bootstrap in order to make site responsive.

Lets now start with making a responsive master page. First of all you need to have a responsive HTML site. Take the portion that you want to add into master page and uploaded the derived portion with all necessary reference files into SharePoint master page gallery.

Now  publish the master page and click on the gear icon on top right corner > Click on design manager > Under Designer Manager click on Edit Master Pages option and then click on Convert an HTML file to a SharePoint master page option Select your html file.

You will now be redirected to Preview page. You can have a look at the page and resolve issues if you find any. 

On the preview page you will find below content.

This is the actual div where the content will be loaded. So now again visit master page gallery and download the html file that you created. you will much of additional code into it, Also you will find the div that has text that we can see in the yellow bar above.

If you are using bootstrap then find the above div and add a css class named "container" to it, This will make your SharePoint site content container responsive.

So now if the content that you add to the page is responsive then the site will behave responsive in nature.

Now if you want to add any of the default contents like Search box, Global navigation, Quick links etc. you can go to the preview of your master page and click on snippets on top left corner.

This will take you to SharePoint snippet gallery. You can select any of the desired control and find its xml code and can add it to your master page html.

I think that it for SharePoint Master Page.

Now Lets make SharePoint page layouts responsive.

So you can open SharePoint designer or you can directly download any of the SharePoint page layout file. Make necessary changes to the file and as per your required webpart zone.

Note: Use bootstrap classes in order to make each of the webpart zone responsive.

Once this is done save the changes rename the file and upload the same to master page gallery. Now then you create an new SharePoint page make sure you select the newly created page layout.

That's it for making a SharePoint site responsive. above steps are enough at the first go.

Regards,
Keyur Pandya
Labels:

Comments

Post a Comment

Popular posts from this blog

Business Data Connectivity

I came to a requirement wherein I was supposed to get data from an 3 rd party portal using API’s and then bring them to SharePoint server. The first approach that I finalized was just to make BDC solution that will get data from 3 rd party portal and will deploy it to SharePoint. How to Create BDC solution in SharePoint? I found below link that is having really great description about hot to create and deploy the BDC solution to SharePoint. http://www.c-sharpcorner.com/uploadfile/hung123/creating-business-data-connectivity-service-using-visual-studio-2010/ After creating an POC I came to know that BDC model cannot be deployed on Multi tenant farm. So what can be done next? After some amount of googling I came to know that we can create BDC solution using WCF services also. So I created a WCF service solution that acted as a wrapper that used to fetch data from the portal. We can them publish that service to IIS or Server and use the servic...
2 comments
Read more

Dataverse Multi Choice Columns in PowerApps

We have been working with PowerApps, PowerApps and Dataverse and now I thought of sharing a few tips to ease your work if you are new to PowerApps + Dataverse as a combination. I will be sharing a few more tips in my upcoming blogs but to get started, Let’s take Multi Choice Columns this time. Unlike SharePoint or any other data source, Dataverse Multi choice columns are different so basically, I cannot go to my PowerApp and directly print selected value in a label. So, this is how you can show multi choice values in label. You need to use concat that allows to concat multiple selection. PowerApps has concat function that takes. Concat function syntax :  Concat (  Table ,  Formula  ) In my case I am trying to render a multi choice column values into a vertical gallery webpart. I have added a label control to a vertical gallery and then added below code.   Concat(ThisItem.ColumnName,Value & "") Hope this helps, Thanks, Keyur
Post a Comment
Read more

SharePoint Site Script & Site Design

  H ope you are doing fine and safe in this pandemic situation. I recently came up with an opportunity to work with SharePoint Site Designs. SharePoint Site templates are now replaced with Site designs in Modern Sites.   SharePoint allows us to create JSON schema to apply our custom options that we want to add. Below are the things we can apply using site script. Create a new SharePoint list Define a new site column Define a new content type Add a navigation link Remove a navigation link Apply a theme Set branding properties Set a site logo Join a hub site Install an add-in or solution Register an extension Activate a Feature Trigger a flow Configure regional settings Add users (principals) to SharePoint Groups Manage guest access Let us assume we have a JSON schema created. I am taking below sample from MS documentation for reference.   We will now be adding above JSON schema to SharePoint as Site Script. Below is the command we execute. $site_script = ‘{   ...
Post a Comment
Read more