Full-Width Row enhancement

You can use the Full-Width Row enhancement to display a page row in the entire width of a browser window. Use this with page rows that contain a banner (an HTML Content widget that contains an image) or a slideshow (Content Slideshow widget) that are located at the top of a page. 

The full-width row enhancement applied to a page row that contains a slideshow widget.

Sections in this article: 

Considerations

  • Best use case: The Full-Width Row enhancement works best with page rows that contain only a banner image in an HTML Content widget, or the Content Slideshow widget.
  • Multiple widgets: Do not use the Full-Width Row enhancement on a page row that contains multiple widgets. 

Set up the enhancement

Most digital workplaces come with this enhancement already applied. To check whether your digital workplace has the enhancement, you can proceed to the Configure the enhancement section and follow the instructions to apply the enhancement class. If those steps do not visually change the page row, you must add the following CSS code to your digital workplace. To request this enhancement to be set up in your digital workplace, contact our Igloo team. 

Add enhancement CSS code to your theme

Add the following CSS code to your digital workplace theme if the enhancement does not automatically work when applied to a page row. See Adding CSS to your digital workplace.

/* Row Class: fullwidth */
#content-body {
    max-width: 100% !important;
}

#content-body > div:not(#ig-page-view):not(#comsignin),
#ig-page-view > div,
#signin #content-body,
#content-head > *,
#trailer,
#trailerbar {
  width: 1100px;
  margin-right: auto !important;
  margin-left: auto !important;
  box-sizing: border-box;
}

#ig-page-view > div.fullwidth {
  width: 100% !important;
}
.fullwidth .ig-cpt.ig-widget-type-carousel.custom-slider .ig-carousel-pane-container-content-inner {
  padding-left: 0;
}
.fullwidth .ig-cpt.ig-widget-type-carousel.custom-slider .slick-dots {
  width: 1100px;
}
@media (max-width: 1200px) {
  .fullwidth .ig-cpt.ig-widget-type-carousel.custom-slider .slick-dots {
    width: 90%;
  }
}
@media (max-width: 498px) {
  .fullwidth .ig-cpt.ig-widget-type-carousel.custom-slider .slick-dots {
    width: 96%;
  }
}

Configure the enhancement

  1. Navigate to the page you want to edit. 
  2. Select Actions and then Edit. 
  3. Select the </> icon in the top right-hand corner of a row.
  4. Add the class fullwidth, and select Done. See Applying custom CSS to page rows for more information.
  5. At the bottom of the page, select Publish Page. 

 If the page row does not visually change, see the Add enhancement CSS code to your theme section above. 

Turn the enhancement on

Once the code has been placed, the enhancement is ready to be used. 

Turn the enhancement off

It is not necessary to turn off the enhancement as it is built into most digital workplaces. Simply remove the fullwidthclass from page rows to remove the effect. 

Use the enhancement

Members will view the page row at full browser width.