Codeplex foundation Desing Package

Nov 14, 2013 at 7:43 AM
Hello. Please i have successfully imported the codeplex foundation design package to my office 365. i have applied it and its working just fine. However, i have realized that it does not fill up the entire page when i apply it to a site. it seem to be centered and so there are blank spaces to the left and right. I wish that i can be guided to edit it so that it will fill up the whole page just like the bootstrap beta design package does. Thanks for your time.
Coordinator
Nov 19, 2013 at 5:39 PM
Hi,

The behavior you are seeing is by design within Foundation 4 itself. In particular, the row class has a max-width of 62.5em. Because the default font size set by foundation is 16px, this translates to a max width of 1000px. If you open foundation.css included in the package and scroll to line 86, you will see:
max-width: 62.5em;
You can increase this, or take it out if you want to always use 100% of the screen width. If you make this change you will either have to point your master page to this stylesheet, or modify the foundation.min.css as well.

Eric
Developer
Nov 26, 2013 at 7:46 AM
Hi Nanayaw,

Please note that we removed this width limitation for large screens in the WSP Edition (https://responsivesharepoint.codeplex.com/releases/view/114361) by adding an additional media query in our foundation-custom css file.

Raphael.