6

I want to create office 365 site which is responsive and also runs on the mobile device. I have created a custom master page and custom page layout. Now I created one page using this custom page layout and add different web parts in each zone(5 different zones in page Layout). How should I make this page responsive? Currently, it is not responsive it has been overlapping on each other. Is it possible to make the responsive site using OOB functionality in the page or Should I have to create custom pages and write a custom code for that?

Thanks

2

If you really want a fully responsive site i would rather recommend you to develop a web page from the scratch inside sharepoint. Then you can use Jqueries, Javascripts and various HTML and CSS effects and make it a fully responsive site. Also you could use Bootstrap for mobile responsiveness.

| improve this answer | |
  • Yes, I have this option in my mind. But, Is it possible that I can use OOB webparts like Announcement, Links, Tasks in my page and make this page responsive? Currently I am using this OOB functionality in my page and the page is not responsive. – Krunal Patel Dec 15 '16 at 5:53
  • Sorry, im afraid that you cant use that option mate. What are the webparts that you want to add? i use this option in my environment and this enables you more control over sharepoint and you can gain more productivity on your business process – Arvinda Sudan Dec 15 '16 at 6:27
  • I want to add Announcement, Links, Events and Document Library – Krunal Patel Dec 15 '16 at 6:59
  • So you can still get the using spservices(which is not so straight forward like webparts).But you can still get the data from the announcements, events and document libraries in your own customized way. If you need any help feel free to ask. – Arvinda Sudan Dec 15 '16 at 8:39
1
  • You need your newly created Master Page should be responsive.
  • Then you need to create a pagelayout which is also support for the responsive mode.
  • You can use CSS, Media Queries, JQuery for the responsive page designing.
  • Reference for the Responsive Master Page. Reference 1, Reference 2, Reference 3

Hope this will help you!

| improve this answer | |
  • Yes, I have Created master page that is responsive, Page layout is also responsive. But I am using OOB functionality like Announce, Links, Events, webparts in my page. So this default is not working responsive. Is it possible to create responsive page if I use OOB functionality in my page? – Krunal Patel Dec 15 '16 at 5:57
  • You need to check the structure of Announce, Links, Events, webparts and then you need to override the existing CSS with your own responsive css classes. – Ram Dec 15 '16 at 6:32
  • "and then you need to override the existing CSS with your own responsive css classes" ... in other words: you need to rewrite and counter all existing styling from scratch, You might as well start building everything new, as that will take considerable less time.. Do not forget, some of SharePoints CSS coding goes back to 2001, sometimes you need 4 lines of modern CSS to disable SharePoints 16 years old CSS.. – Danny '365CSI' Engelman Dec 15 '16 at 10:11
1

Two approaches to add on:

  1. You could use the JsLink option available (not all OOTB webparts have it though) in these OOTB webparts to add bootstrap classes to make it responsive or re-render the items with a custom UI altogether.

  2. Build the entire webpart in HTML, JS & CSS (Frameworks like Angular/React would be helpful, if not try using any client-side templating engine from Handlebars, JsViews or Underscore). Then you could use OOTB REST APIs to query the respective list and build the UI the way you want it. Load the HTML file on the page layout as a Content Editor Webpart.

| improve this answer | |
1

change back to the default masterpage like seattle.master!

save bellow to .css file and override css pointing to save css file. No need to update the masterpage, no need for javascript. All done in CSS as it should be!

@import "//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.css";


@media screen and (max-width: 1044px) {
    /* Hide unnecessary page elements */
    .ms-core-listMenu-horizontalBox .ms-listMenu-editLink  /* Global navigation "Edit Links" when managed navigation is in use */ {
        display: none;
    }

    /* Undo the crazy that SharePoint creates with table display set to DIVs*/
    #s4-titlerow .ms-table,
    #s4-titlerow .ms-tableRow,
    #s4-titlerow .ms-tableCell {
        display: block;
    }

    /* Site logo wrapper */ 
    #siteIcon {
        float: none;  /* Remove OOTB float - this allows title row elements to return to typical block elements along with the table display changes above */
        text-align: left;  /* Alter OOTB alignment */
    }

    /* Page title text */
    #pageTitle {
        position: absolute;  /* Remove from content flow and create precise placement based on parent container */
        top: 30px;  /* Position from top */
        left: 220px;   /* Positioning from left */
    }

    /* Top nav bar size */
    .ms-breadcrumb-box {
        height: 30px;   /* Alter OOTB height */
    }

    /* Top nav bar placement & formatting */
    .ms-breadcrumb-top > .ms-core-navigation {
        display: block;  /* Force respect of some declarations */
        margin-top: 20px;  /* Create space between the site logo/title and nav bar */
    }

    /* Search placement */
    .ms-mpSearchBox.ms-floatRight,
    #searchInputBox  {
        float: none;  /* Remove OOTB float - this allows the search to move to the left under the top nav bar */
    } 

    /* Adjust padding for content containers */
    #s4-bodyContainer {
        padding-bottom: 60px;  /* Alter OOTB padding */
    }
    #contentRow {
        padding-top: 80px;  /* Alter OOTB padding */
    }
}


@media screen and (max-width: 926px) {

/* --- Enterprise Wiki --- */
    /* Content area wrapper, parent of col-fluid-1 and col-fluid-2 */
    #contentBox {
        min-width: inherit;   /* Reset OOTB min-width from fixed value to inherit which will take up the available space */
    }

    /* Alter right column on Enterprise Wiki default page */
    .right-wp-zone-col {
        float: none;  /* Remove OOTB float */
    }

    /* Sub content area wrappers, sibling to right-wp-zone-col */
    .col-fluid-1,
    .col-fluid-2 {
        margin-right: 10px;  /* Alter OOTB margin */
    }


/* --- Blog --- */
    /* Reset min-widths on content containers */
    #contentBox,
    .ms-blog-MainArea {
        min-width: inherit;   /* Reset OOTB min-width from fixed value to inherit which will take up the available space */
    }

    /* Table conversions so table cells will wrap */
    .ms-blog-MainArea {
        display: block;  /* Switch from a table display to a block level display, which forces other elements to be above or below */
    }
    .ms-blog-MainArea td:first-child, 
    .ms-blog-LeftColumn {
        display: inline-block;  /* Switch from a table cell display to an inline block level display, which allows other elements to be to the right or left */
        width: auto;
    }


/* --- Team Site --- */
    /* Reset min-widths on content container */
    #contentBox {
        min-width: inherit;   /* Reset OOTB min-width from fixed value to inherit which will take up the available space */
    }

    /* Table conversions so table cells will wrap */
    #layoutsTable {
        display: block;  /* Switch from a table display to a block level display, which forces other elements to be above or below */
    }
    #layoutsTable td {
        display: inline-block;   /* Switch from a table cell display to an inline block level display, which allows other elements to be to the right or left */
        width: auto;
    }

    /* Right side table cell */
    .ms-wiki-columnSpacing {
        padding-left: 0;  /* Alter OOTB padding */
    }
}


@media screen and (max-width: 740px) {

/* --------- LEFT NAVIGATION OPTION 1 --------- */

    /* --- Hide the left navigation bar --- */

        /* Hide the left nav bar */
        #sideNavBox {
            display: none;
        }

        /* Reset the margin of the content area */
        #contentBox {
            margin-left: 20px;
        }

        /* Remove the content area border */
        .right-wp-zone-col {
            border: 0;
        }


/* --------- LEFT NAVIGATION OPTION 2 --------- */

    /* ---  Move the left nav UNDER the content --- */

        /* Set the parent as the Flexbox container */
        #contentRow {
            display: flex;
            display: -ms-flexbox;  /* IE10 */
            display: -webkit-box;  /* Safari, Android */
            flex-wrap: wrap;
            -ms-flex-wrap: wrap;  /* IE10 */
        }

        /* Set the order of the Flexbox items */
        #sideNavBox {
            order: 2;
            -ms-flex-order: 2;  /* IE10 */
            -webkit-order: 2; /* Safari, Android */
            margin-top: 20px;  /* Add spacing between content area and left nav */
        }
        #contentBox {
            margin-left: 20px;  /* Reset the margin of the content area */
            order: 1;
            -ms-flex-order: 1;  /* IE10 */
            -webkit-order: 1; /* Safari, Android */
        }

        /* Remove the content area border */
        .right-wp-zone-col {
            border: 0;
        }


/* --------- LEFT NAVIGATION OPTION 3 --------- */

    /* ---  Move the left nav ABOVE the content --- */

        /* Hide child level navigation items */
        ul.root ul {
            display: none;
        }

         /* Reset the margin of the content area */
        #contentBox {
            margin-left: 20px;
        }

        /* Remove the content area border */
        .right-wp-zone-col {
            border: 0;
        }

        /* Format left nav container and items */
        #sideNavBox {
            float: none;  /* Remove OOTB float so content appears beneath the nav */
            border: 1px solid #999;  /* Bounding box */
            border-radius: 15px;  /* Rounded corners */
            padding: 5px 10px;  /* Add padding to space content from border */ 
            margin-bottom: 15px;  /* Create space between left nav and content underneath */
        }
        .ms-core-sideNavBox-removeLeftMargin {
            margin-left: 0;  /* Alter OOTB margin */
        }
        #sideNavBox .ms-core-listMenu-item {
            padding: 3px 10px;  /* Alter OOTB padding */
        }

        /* Add header text */
        #sideNavBox:before {
            content: "Additional Resources:";  /* Header text */
            padding-bottom: 7px;  /* Space out text from horizontal rule */
            display: block;  /* Required for padding to work */
            border-bottom: 1px solid #999;  /* Horizontal rule */
        }

        /* Hide child level navigation items and other unnecessary items */
        #sideNavBox ul.root ul,
        .ms-core-listMenu-verticalBox .ms-listMenu-editLink,  /* Current navigation "Edit Links" when managed navigation is in use */
        .ms-core-sideNavBox-removeLeftMargin > .ms-core-listMenu-verticalBox  /* Site Contents */ {
            display: none;
        }
}


@media screen and (max-width: 470px) {
    /* Hide Edit Links (icon and text) */
    div[id$="TopNavigationMenu"] li.static.ms-listMenu-editLink,  /* Desktop view */
    div[id$="TopNavigationMenu"] ul.root:hover li.ms-listMenu-editLink /* Mobile view */ {
        display: none;
    }

    /* Adjust menu placement from previous responsive changes */
    .ms-breadcrumb-box {
        height: 40px; /* Increase height previously set */
        margin: 10px 0 5px -15px;  /* Move nav closer to logo and edge of page */
    }

    /* Remove unnecessary branding from global nav */
    div[id$="TopNavigationMenu"] ul.root {
        border: 0;
        background: #fff;
    }

    /* Add "Menu" text before nav list - necessary to prevent mobile user accidentally jumping to first nav item when menu is activated */
    div[id$="TopNavigationMenu"] ul.root > li.static:first-child:before {
        content: "Menu";
        display: block;
        padding: 5%;
        background: #ccc;
    }

    /* Reset global navigation item formatting */
    div[id$="TopNavigationMenu"] li.static a.static,  /* First level of nav */
    div[id$="TopNavigationMenu"] li.static a.dynamic  /* Second level of nav */ {
        min-width: 100px;  /* Optional */
        width: auto;   /* Can also set to an absolute value */
        padding: 10% 15%;
        border-top: 0;
        border-bottom: 1px solid #dfdfdf;
        margin-right: 0; 
        display: block;
        font-size: .8rem;
        line-height: 1.5;
        position: relative;
    }
    div[id$="TopNavigationMenu"] li.static a.dynamic {
        padding: 10% 15% 10% 25%; 
    }
     div[id$="TopNavigationMenu"] li.static:last-child > a {
        border-bottom: 0;
    }
    div[id$="TopNavigationMenu"] li.static a:hover  {
        background: rgba(205,230,247,0.5); 
    }

     /* Reset positioning of level 2 navigation items */
    div[id$="TopNavigationMenu"] ul.dynamic {
        border: 0;
        box-shadow: none;
        left: 0;
        top: 0;
        position: relative;
        padding: 0;
        width: auto !important;  /* !important required to override inline style */
        left: 0 !important;  /* !important required to override inline style */
        top: 0 !important;  /* !important required to override inline style */
    }

    /* Hide level 3 navigation items */
    div[id$="TopNavigationMenu"] ul.dynamic ul.dynamic {
        display: none;
    }

    /* Remove drop down arrows on navigation items with dynamic children menus */
    #s4-titlerow div[id$="TopNavigationMenu"] .dynamic-children.additional-background {
        background-image: none; 
    }

    /* Insert stacked lines icon to designate global navigation */
    div[id$="TopNavigationMenu"] ul.root:before {
        content: "\f0c9";
        font-family: FontAwesome;
        background: white;
        font-size: 1.4rem;
        width: 2.6rem;
        height: 1.4rem;
        padding: .3rem 0;
        display: block;
        border-radius: 5px;
        text-align: center;
        border: 1px solid #ccc;
        margin: 0 15px;
    }

    /* Hide stacked lines icon on hover */
    div[id$="TopNavigationMenu"] ul.root:hover:before {
        display: none;
    }

    /* Hide global navigation items */
    div[id$="TopNavigationMenu"] ul.root > li {
        display: none;
    }

    /* Display global navigation box on hover */
    div[id$="TopNavigationMenu"] ul.root:hover {
        background: white;
        border: 1px solid #ccc;
        border-radius: 5px;
        margin: 0 0 0 15px;
        position: absolute;
        z-index: 2;
    }

    /* Display global navigation items on hover */
    div[id$="TopNavigationMenu"] ul.root:hover > li {
        display: block;
    }
}


@media screen and (max-width: 360px) {
    /* Hide right side of Suite Bar links */
    .ms-core-deltaSuiteLinks {
        display: none;
    }
}

taken from here:

https://blog.sharepointexperience.com/2015/03/making-seattle-master-responsive/

| improve this answer | |
  • This is really helpful and exactly what I was looking for. Using this approach I was able to successfully create responsive pages without modifying the master page. Thanks again. – Sagar Dec 19 '18 at 13:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.