SharePoint Online/2013 – Fixing Blank Web Part Page spacing

In an effort to make SharePoint HTML 5 compliant the page layouts needed to be re-worked to use <div> tags instead of html tables.  This is a great change! As a side effect many of the page layouts we used to know and love are not organized very well.  The primary issue is the table spacing we use to see between web parts & web part zones is now gone.
The obvious fix is to make your own page layouts.  Often in my world there is not time nor budget to do that properly through Visual Studio & a WSP.  Here is my work around!
1. On the page add a script editor web part
2. Add the following CSS to the script editor web part
.cell-margin {margin-top: 10px;margin-bottom: 10px;}
.tableCol-75 {padding-right: 15px; Width: 75% !Important;}
.tableCol-25 {Width: 25% !Important;}
.tableCol-50 {Width: 50% !Important;}
.ms-table .tableCol-50:first-child {padding-right: 15px;}
.tableCol-33 {padding-left: 15px;Width: 33% !Important;}
.ms-table .tableCol-33:first-child {padding-left: 0px;}
3. Save and publish the page
You could also do this through the “Alternate CSS” feature in the master page settings if you want to do it at a more global level.

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *