Skip to content

Instantly share code, notes, and snippets.



Last active Nov 29, 2017
What would you like to do?
Fullwidth for

This assumes that you're using collective.themesitesetup. I don't recommend that you use this fullwidth implementation on pages where side portlets are enabled, it tends to look "wonky".

  • Include the fullwidth-for-mosaic.less file with your theme, it needs to be included as part of one of the files that gets compiled to css.
  • Create a folder in your theme and name it install then place the registry.xml in the install folder.
  • Add the line below to your manifest.cfg file
install = install
/* ====== overrides for fullwidth ====== */
.mosaic-grid-row-fullwidth {
padding-left: 0;
padding-right: 0;
/* make the containers 100% by default */
.outer-wrapper > .container{
/* set a max width so that it doesn't look weird on super large
desktop screens */
margin:0 auto;
margin:0 auto;
padding: 16px 32px;
/* give it a background color to frame everything (only
useful on super large desktop screens */
#content {
/* default behaviour is to have a 32px margin on both sides of
the standard mosaic grid row */
.mosaic-grid-row {
margin-left: 32px;
margin-right: 32px;
/* zero the padding for the full width mosaic grid row */
.mosaic-width-full {
padding-left: 0;
padding-right: 0;
/* Use a negative margin on the fullwidth row */
.mosaic-grid-row-fullwidth {
margin-left: -32px;
margin-right: -32px;
/* navbar container class reset (otherwise content in the navbar appears
to be too narrow */
body .plone-navbar .container{
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
/* I don't want any margin at the bottom of the content
probably up to your taste
#content {
<?xml version="1.0"?>
/* adds a custom fullwidth action */
<record name="">
<value purge="False">
<records interface=""
<value key="name">grid-row-fullwidth</value>
<value key="category">row</value>
<value key="label">Full width</value>
<value key="action">row-toggle-class</value>
<value key="icon">true</value>
<value key="favorite">false</value>
<value key="weight">100</value>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.