SharePoint 2013 – Fixing Blank Web Part Page spacing

For those of you that are like me and their favorite OOTB page layout was the "Blank Web Part" page in previous versions of SharePoint, you should enjoy this post.

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
   <style>
       .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;}
   </style>
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.
Hope this Helps! -Nick

2 Comments

  1. Anthony September 24, 2014
  2. huey tran April 24, 2015

Leave a Reply