Making a SharePoint 2013 Publishing Site responsive

SharePoint 2013 introduced the concept of Device Channels with the noble intention of allowing developers to create distinct versions of a SharePoint site targeted at specific devices. This would be done by essentially implementing a different master page for each device catered for. Therefore different controls could be added and even different markup for each situation.

This is a very powerful option to have, but also – it’s a lot of work.

And I’m a lazy man.

In the fickle world of Information Technology changes need to be enacted quickly. And who knows when the next hefty-bearded graphic designer type will impose a new, more modern-er look and feel on your site?

Well for an easily implemented solution – especially in a publishing site where we are mainly talking just copy and images – we can do it the accepted and proper way.  Like in the real world. Using CSS and media queries.

Gubbins

First of all there’s a lot of SharePoint gubbins on the page which, frankly, is making this job more difficult.  I’m talking about things that for a publishing site, in mobile view, just make our lives more difficult.  It’s a judgement call as to what is needed but where possible – get rid (or should I say obscure)?  I’m talking about:

  • the ribbon
  • search box
  • Main navigation
  • Quick Launch

The majority of this can be done with the following CSS.  Were taking 1024px as the minimum width for the desktop environment here:

@media only screen and (max-width: 1024px) {
    #s4-workspace {
        width: auto !important;
        overflow: hidden !important;
        overflow-y: auto !important;
    }

    #ms-designer-ribbon,
    #sideNavBox,
    .ms-breadcrumb-top,
    #DeltaPlaceHolderSearchArea {
        display: none !important;
    }

    #titleAreaBox {
        margin: 0 !important;
    }

    #s4-titlerow {
        padding-bottom: 0px !important;
        padding-top: 20px;
        height: auto !important;
    }

    .ms-breadcrumb-box {
        float: left;
        height: auto !important;
    }

    #pageTitle {
        display: flex;
    }

    .js-callout-launchPoint {
        display: none !important;
    }

    #s4-workspace {
        width: auto;
        margin-left: auto;
        margin-right: auto;
    }

    #contentBox {
        margin: 0px !important;
        margin-left: auto;
        margin-right: auto;
        min-width: unset;
    }

    .ms-webpartzone-cell {
        margin: 0 0 10px 0 !important;
    }

    .ms-webpart-chrome-title {
        display: none;
    }

    .ms-rtestate-field > img {
        width: 150px !important;
        height: inherit !important;
    }
}

Breaks

Want your SharePoint 2013 site to scale well on a mobile device? Well you’ve got all those breaks to consider in your CSS for iPhone, iPad, Galaxy etc (oh, and Windows phones if you are clinging onto that one for grim death).  These can be bewildering and who knows where is the best point to make the break?

Mends

If you’re using the Promoted Links in your site – why not take a cue form these and structure your breaks accordingly.  You can structure your CSS to use media queries based around the widths of the tiles in the Promoted Links.  Get this right and the tiles will always fit within the page, flowing onto the next line when page real-estate constricts.  This approach, in tandem with my post on wrapping the Promoted Links, allows the site to behave as a true mobile site.

The following CSS creates a break for widths of five tiles down to two, and sets the page elements accordingly:

/* 5 tiles across */
@media only screen and (max-width: 1024px) and (min-width:790px) {
    #s4-bodyContainer,
    #contentBox {
        width: 790px !important;
        min-width: 790px !important;
    }

    .ms-promlink-body,
    .ms-promlink-root,
    .ms-fullWidth,
    .ms-webpart-chrome,
    .ms-webpart-chrome-title,
    .ms-WPBorder,
    .ms-wpContentDivSpace {
        width: 800px !important;
    }
}

/* 4 tiles across */
@media only screen and (max-width: 789px) and (min-width:630px) {
    #s4-bodyContainer,
    #contentBox {
        width: 630px !important;
        min-width: 630px !important;
    }

    .ms-promlink-body,
    .ms-promlink-root,
    .ms-fullWidth,
    .ms-webpart-chrome,
    .ms-webpart-chrome-title,
    .ms-WPBorder,
    .ms-wpContentDivSpace {
        width: 640px !important;
    }
}

/* 3 tiles across */
@media only screen and (max-width: 629px) and (min-width:470px) {
    #s4-bodyContainer,
    #contentBox,
    .ms-promlink-body,
    .ms-promlink-root,
    .ms-fullWidth,
    .ms-webpart-chrome,
    .ms-webpart-chrome-title,
    .ms-WPBorder,
    .ms-wpContentDivSpace {
        width: 470px !important;
        min-width: 470px !important;
    }

    .ms-promlink-body {
        width: 480px !important;
    }
}

/* 2 tiles across */
@media only screen and (max-width: 469px) {
    #s4-bodyContainer,
    #contentBox,
    .ms-promlink-body,
    .ms-promlink-root,
    .ms-fullWidth,
    .ms-webpart-chrome,
    .ms-webpart-chrome-title,
    .ms-WPBorder,
    .ms-wpContentDivSpace {
        width: 310px !important;
        min-width: 310px !important;
    }

    .ms-promlink-body {
        width: 320px !important;
    }
}

Bingo!

Leave a Reply

Your e-mail address will not be published. Required fields are marked *