SharePoint Responsive List Example + Media Query CSS

facebooktwittergoogle_plusredditpinterestlinkedinmailby feather

With all the buzz about responsive design, guys working on SharePoint 2010 projects were feeling left out. Sure, there’s a lot of hype about implementing mobile strategy for CMS like SharePoint 2013 and Sitecore, but what if you have the typical SharePoint 2010 Intranet. Can your users still view some of the native SharePoint features like lists and libraries from their phone?

Yes, they can. Here is a quick example of some of the tactics involved. I chose a SharePoint 2010 Discussion list for this blog, but you could use the same approach with many of the other native features. Note, this has been tested in IE8 (with help of Respond.js), IE9, Firefox, and Chrome.

Desktop Full Screen:

SharePoint Responsive List - Full Screen

Mobile View:

MovileResponsiveListView

If you would like to learn more about Responsive Design in SharePoint, check out mySharePoint Goes Mobile Presentation where I cover some Responsive Design, SharePoint OOTB mobile views, and SharePoint 2013 Device Channels and Image Renditions. Also, my company’s site, (DEG) have some other great SharePoint blogs.

If there is a topic you’d like to see me take on, please respond in the comments below. I am doing some interesting things with SharePoint here at DEG, so if you’ve got a challenge, my team most likely found a way around it.

table.ms-listviewtable > tbody > tr
{
padding: 10px;
}

table.ms-listviewtable > tbody > tr > td
{
display: block;
text-align: left;
border: none!important;
width: 100%; /* IE8 */
float: left; /* IE8 */
}

table.ms-listviewtable > tbody > tr > td.ms-vb2 > a
{
font-size: 1.2em;
font-weight: bold;
}

table.ms-listviewtable tr.s4-itm-hover > td, table.ms-listviewtable tr.ms-itmhover:hover > td, tr.s4-itm-selected > td, tr.s4-itm-selected:hover > td
{
border: none;
}

table.ms-listviewtable .ms-viewheadertr, table.ms-listviewtable tbody tr td.ms-vb-firstCell
{
display: none;
}

facebooktwittergoogle_plusredditpinterestlinkedinmailby feather
Posted in SharePoint 2010, SharePoint 2013 Tagged with: , , ,
0 comments on “SharePoint Responsive List Example + Media Query CSS
1 Pings/Trackbacks for "SharePoint Responsive List Example + Media Query CSS"
  1. […] a previous post I showed how to make a SharePoint discussion board list more mobile friendly by using only CSS. […]

Leave a Reply

Your email address will not be published. Required fields are marked *

*