Centering content area and fixing page width in Office 365 Sharepoint Online 2013 public site

center-contentOne of the stranger design choices in the layout of 2013 public sites, is the”narrow”, left aligned page content area in the Oslo template. Nothing makes a site look more unprofessional or unfinished than awkwardly aligned content areas. It creates a terrible first impression and even though Msft must be aware of the issue from the many complaints about it they’ve seen in the community forum, it still hasn’t been addressed.That’s amazing considering a couple of lines of css code would fix it. The cause appears to be simple: Microsoft allowed space for the right sidebar the Berlin template uses, but then forgot to correct that in Oslo which has no right sidebar. You can see in this demo example how it’s supposed to look ยป
To get your site looking like that by centering the content areaand fixing the strangely narrow width, add some css rules to your site’s stylesheet
Under “Site” in the ribbon when editing a page, open the stylesheet

At the top, add this, adjusting the pixels to suit:
.contentwrapper div {margin-left:auto !important;margin-right:auto !important;}
div#contentBox{min-width:885px;} *See note below
Page Layouts
The above should address the content areacontainer, but if you are using a page layout comprised of different sections, you may also need to target those sections to get a balanced look. You can get the relevant classes/id’s by looking at the page source code or using a browser developer tool. Here are some examples of the many classes in use:
div.fullPageLayout-inner{min-width:685px !important;}
Header/2 column layout: div.layout-col.twoRowTwoColumn-bottomLeft, div.layout-col.twoRowTwoColumn-bottomRight {width:50% !important}

Blog Pages
If you use the 365 blog, you may notice the right sidebar still overlaps the post content area after applying the fix above. That’s because, unfortunately, Msft still uses html tables for layouts in the blog pages, so a different fix is needed. To complicate things further, Chrome and other webkit browsers don’t treat tables the same way as other browsers…To target just the post content and the table it’s contained in without impacting other tables on the site in MOST major browsers, add this to the stylesheet:
ul.ms-blog-postList, .ms-blog-MainArea .ms-fullWidth table {min-width:750px !important;margin-right:20px !important;}
Adjust the width to suit of course.

Impact On Mobile Site Design
You’ll need to consider the impact of adding a”min-width” rule on your mobile design, if that’s important to you. Take a look at this article for some tips on how to improve mobile views in 365: Improve the mobile view for Office 365 Sharepoint Online public sites.

If you have a question about this or any other Office 365 topic, please visit my forum. I’m also available for consultations or development work!
And if you found this helpful, feel free to share it socially byclicking one of the icons up top!