Tuesday, October 15, 2013

Reducing all that White Space in a SharePoint 2013 Page

Web part pages in SharePoint 2013 render with large spaces between the web part zones. It turns out to be caused by a border-spacing style applied to the ms-webpartPage-root class. Adjusting this to 0px removes lots of the unnecessary white space. Now white space is a Good Thing in design (but in the case of these web part pages it seems to be a little too much of a good thing!). One way is to include the following CSS:
.ms-webpartPage-root { border-spacing:0px !important; }

2 comments:

Mat Kramer said...

Thanks for the info! Info suggestions on how a user with no admin privilege can insert that code on a page?

whats.to.learn.today said...

With contribute rights on the site page library (or web part page library), you should be able to edit the page, add an HTML Form web part, and then insert the css inside a style tag in the source of that web part - remember to hide the frame & title of the web part so it simply becomes a carrier for the markup.

Using an HTML form web part seems to be the best approach for adding markup to a page, as the Content Editor web part has a habit of stripping out markup when saving