Create a fixed width and responsive mobile master page using SharePoint designer 2013

This SharePoint customization tutorial, we will discuss, how to create a fixed width master page in SharePoint 2013/2016/Online using CSS. And also, we will discuss how to create a responsive mobile master page using SharePoint 2013 designer for SharePoint 2013 sites.

Create fixed width master page in SharePoint 2013

Now, we will see, how to create a fixed width master page in SharePoint 2013 using SharePoint designer 2013. In the default master page, the width is expanded to fill the full browser window. So here we want to make the width fixed.

By default, Each SharePoint site has two master pages assigned, one Site Master page and Another one is System master page. Site master pages used in content pages like Homepage. System master page is used in administrative pages like Site Settings page.

The default master page used in the Site master page is the seattle.master page. Here we will try to make a fixed width master page for the site master page.

Now open your SharePoint 2013 site using SharePoint 2013 designer. Here we will not modify the existing default master page, we will copy the master page and we will do our modifications in that master page. And then we can set our custom master page as the default master page.

Now in designer click on Master Pages, you should able to see all the later pages. If you are not able to see the Master Pages tab then click on All Files -> _catalogs -> masterpage. You can see all the pages.

Right-click on the seattle.master and then copy the master page. Then Paste in the same place. Rename it to a proper name. Now whatever modification we will do we will do in this custom master page.

Before modifying anything in the master page we will modify the CSS.

Here we will create a custom CSS file. to do this right click and New -> CSS. It should be like below:

Fixed width and responsive mobile master page in SharePoint designer 2013

Then in the CSS file put the below code:

<style>
#s4-workspace {
background: #999999;
}

#s4-titlerow, #contentRow {
background: #FFFFFF;
width: 1024px;
margin-left: auto;
margin-right: auto;
}

#s4-titlerow {
margin-top: 50px;
}

</style>

Now Save the file.

Give StyleSheet reference in the custom master page:

Since our stylesheet is ready, now we need to give a reference in the custom master page that we have created before. We can give reference by using the SharePoint:CssRegistration control.

Add the below tag before the <head> tag. You can put inside <head> tag.

<SharePoint:CssRegistration ID="customCssRegistration" Name="<%$SPUrl:~Site/_catalogs/masterpage/mycustomstyle.css%>" runat="server"/>

Now set the custom master page as the default master page and then open the site in the browser, you will see the layout as fixed width.

Create a responsive mobile master page using SharePoint designer 2013

Now we will see, how to create a responsive mobile master page using SharePoint 2013 designer.

If any default website user will open in SharePoint designer 2013, then they will have to scroll horizontally and vertically as well which is not a good user experience for mobile or tablet users.

Here we will try to design a master page where the user does not need to scroll horizontally.

Follow the below steps to create a responsive mobile master page using SharePoint designer 2013.

We will create a new custom master page by copying an existing seattle.master page.

Then we will create a custom CSS and override few things in the CSS file and will save it some location in SharePoint site.

Then we will give the CSS file reference in the new custom master page which we have created earlier.

Now to create the custom master page, Open your SharePoint 2013 site using SharePoint 2013 designer. Then from the Navigation select Master page.

Then select seattle.master page and copy this and paste in the same place and rename the file to your preferred name. Our custom master page is ready, we need to modify the CSS file.

For Navigation click on All Files then _catalogs -> masterpage. Right-click there and click on New -> CSS.

Then give a name for the CSS file like MyCustomResponsive.css. Then add the below CSS content:

<style>
#suiteBar, #s4-ribbonrow {
display: none;
}

#titleAreaRow, #s4-titlerow {
height: auto;
width: auto;
}

#titleAreaRow > div, #contentRow > div, #layoutsTable td {
float: left;
display: inline-block;
}

#contentBox {
min-width: 100px;
margin-left: 20px;
}

#s4-workspace {
width: auto !important;
}

</style>

Then save the file.

Now it is time to give reference to the CSS file in the custom master page,

Now open the custom master page and write the below tag to give reference the master page:

<SharePoint:CssRegistration ID="customCssRegistration" Name="<%$SPUrl:~Site/_catalogs/masterpage/MyCustomResponsive.css %>" runat="server"></SharePoint:CssRegistration>

Now Save your custom SharePoint master page. Remember to publish both the CSS and custom master page file.

You may like following SharePoint customization tutorials:

This SharePoint tutorial, we learned how to create a fixed width master page in SharePoint 2013 by overriding CSS. And also, we saw how to create a responsive mobile master page using SharePoint designer 2013.

free sharepoint training

SharePoint Online FREE Training

JOIN a FREE SharePoint Video Course (3 Part Video Series)

envelope
envelope

Bijay Kumar

I am Bijay from Odisha, India. Currently working in my own venture TSInfo Technologies in Bangalore, India. I am Microsoft Office Servers and Services (SharePoint) MVP (5 times). I works in SharePoint 2016/2013/2010, SharePoint Online Office 365 etc. Check out My MVP Profile.. I also run popular SharePoint web site SharePointSky.com

>