CSS Trick - Switch between Views/Web parts In SharePoint Responsive Design

Switch between the views based on the screen width using CSS without any need of JQuery or JavaScript

SharePoint List view web parts are not responsive by design. In a responsive site it is quite required to adapt the layout based on the display. Only way is to show fewer information (column & rows) in the mobile version and show more information in the desktop version, this should happen in the real-time when the browser width is adjusted, not on the page load. 

In this blog we will learn how to switch between the views based on the screen width using CSS without any need of JQuery or JavaScript. For this demo I will use calendar web part, each view is added as a webpart. Desktop version will show monthly calendar view, Mobile version will show current event list items.

At first we need to edit the page layout and assign an ID to the DIV of the webpart zone. If you have multiple zones choose the one in which zone you will be adding these webparts.

You might be thinking why we need an ID (TopZoneContainer) for DIV if already an ID (TopZone) is for webpart zone. Reason why we can’t use this Webpart ID is because it is available only in the Edit mode of the page, in the display you will not find this ID hence we have to add ID in order to get hold of specific zone.

<div data-name="WebPartZone" id="TopZoneContainer">
            <!--CS: Start Web Part Zone Snippet-->
            <!--SPM:<%@Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
            <div xmlns:ie="ie">
                <!--MS:<WebPartPages:WebPartZone runat="server" AllowPersonalization="false" ID="TopZone" FrameType="TitleBarOnly" Orientation="Vertical">-->
                <!--MS:<ZoneTemplate>-->
                <!--DC: Replace this comment with default web parts for new pages. -->
                <!--ME:</ZoneTemplate>-->
                <!--ME:</WebPartPages:WebPartZone>-->
            </div>
            <!--CE: End Web Part Zone Snippet-->
        </div>

Once you save page layout, create a page based out of this page layout and Add calendar web parts in the specific webpart zone. As I mentioned earlier First webpart is considered for Desktop second webpart is considered for mobile.

You will see a number next to the title since webpart titles are same anyhow we can get rid of that of well.

 

 

  

Now let’s work on the CSS, at first we will understand the HTML structure by inspecting the elements.

 

You see here two webparts wrapped under the Div (TopZoneContainer). In order to get hold of child elements (webpart divs) I have chosen cssclass property. So it will be .ms-webpartzone-cell, this class is applied by default to the webparts.

Here is the overall css script, it also takes care of showing both webparts when page is in the edit mode.

@media screen and (max-width:767px) {/* Mobile and Tablets */

    /*Hide first webpart*/
    #TopZoneContainer .ms-webpartzone-cell:nth-child(1) {
        display: none;
    }
    /*Show second webpart*/
    #TopZoneContainer .ms-webpartzone-cell:nth-child(2) {
        display: inline-table;
    }
    /*Hide the default title*/
    /*When the first div element is hidden, second elemnts becomes first element */
    #TopZoneContainer .ms-webpart-chrome-title:nth-child(1) nobr > span:first-child {
        display: none;
    }
    /*Add static title for calendar*/
    #TopZoneContainer .ms-webpart-chrome-title:nth-child(1) nobr::after {
        content: "Events";
    }
}

@media (min-width:768px) { /* landscape iPad, lo-res laptops ands desktops */
    /*Show first webpart*/
    #TopZoneContainer .ms-webpartzone-cell:nth-child(1) {
        display: inline-table;
    }
    /*Hide second webpart*/
    #TopZoneContainer .ms-webpartzone-cell:nth-child(2) {
        display: none;
    }

    /*Hide the default title*/
    #TopZoneContainer .ms-webpart-chrome-title:nth-child(1) nobr > span:first-child {
        display: none;
    }
    /*Add static title*/
    #TopZoneContainer .ms-webpart-chrome-title:nth-child(1) nobr::after {
        content: "Events";
    }
    /*Show both webparts in edit mode*/
    #TopZoneContainer #MSOZone .ms-webpartzone-cell {
        display: inline-table !important;
    }
}

 Here is the result

 

 

  

I hope you find this information useful, Happy sharepointing!! .