Sunday 2 March 2014

SharePoint 2013 Responsive design

SharePoint 2013 Responsive design
I am trying to change the some colors and show and hide some web parts based on the device where the site opned.
Use 2 different master pages and using Device channel feature implement different master pages for different devices.
Now how to change the content style on the page based on device.
I am using Content Editor webpart
Inside content edit webpart i am calling one .txt file where i have added all styles.
First open your web site from computer and find the id of your webparts.
Importent: How to access the class of any webpart or div
#<WebPartID or DIvId> .className
{
// Add all your styles here...
border-bottom-color: red;
background-color: lightgreen;
border-top: 5px dashed;
}
Ex of my style:
open notepad and copy below code.
Save as S.txt
Add s.txt in the content editor webpart
In the below code i have 2 webparts(WebPartWPQ3,WebPartWPQ5)
I am showing and hiding based on the width of page.
Try this in computer and tablet and mobile
you can see the difference.
<style type="text/css">
@media only screen
and (min-width: 480px)
and (orientation: landscape)
{
#MSOZoneCell_WebPartWPQ3
{
display: none;
}
#MSOZoneCell_WebPartWPQ5
{
display: block;
}
}
@media only screen
and (min-width: 10px)
and (orientation: landscape)
{
#MSOZoneCell_WebPartWPQ3
{
display: none;
}
#MSOZoneCell_WebPartWPQ5
{
display: block;
}
}
/********** Phone Portait **********/
@media only screen
and (min-width: 480px)
and (orientation: portrait)
{
#MSOZoneCell_WebPartWPQ3
{
display: none;
}
#MSOZoneCell_WebPartWPQ5
{
display: block;
}
}
@media only screen
and (min-width: 10px)
and (orientation: portrait)
{
#MSOZoneCell_WebPartWPQ3
{
display: none;
}
#MSOZoneCell_WebPartWPQ5
{
display: block;
}
}
/********** Tablet Landscape **********/
@media only screen
and (min-width: 1024px)
and (orientation: landscape)
{
#MSOZoneCell_WebPartWPQ5
{
display: none;
}
#MSOZoneCell_WebPartWPQ3
{
display: block;
}
}
/********** Tablet Portait **********/
@media only screen
and (min-width: 1024px)
and (orientation: portrait)
{
#MSOZoneCell_WebPartWPQ3
{
display: none;
}
#MSOZoneCell_WebPartWPQ5
{
display: block;
}
}
</style>