Equal Columns enhancement

You can make all columns within a page row have equal widths with the Equal Columns enhancement. Use this to add visual versatility to a page. 

Two widgets on a page with equal widths.

Sections in this article: 

Considerations

  • Page row placement: Widgets that you want to be in equal columns must all be in the same page row and first placed in the standard column positions.
  • Maximum number of columns: You can use up to three columns.
  • Widget inconsistency: Only column widths are changed, not their behavior or the behavior of the contained widgets. As a result, some widgets (such as the Call to Action widget) may behave unexpectedly.
  • Widget recommendations: We recommend the HTML Content widget, Links widget, and Calendar Events widget (Monthly Compact view) for use with this enhancement. Any widget that has the ability to "Load More" content is not ideal for this custom layout if there are additional widgets underneath the custom layout row.

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: equal-columns */
#ig-page-view > div.equal-columns {
  width: 1120px; 
}
  @media (max-width: 1200px) {
    #ig-page-view > div.equal-columns {
      width: calc(90% + 20px) !important; 
} 
}
  @media (max-width: 498px) {
    #ig-page-view > div.equal-columns {
      width: 96% !important; 
} 
}
  #ig-page-view > div.equal-columns .ig-column {
    flex: 1 1 auto;
    right: auto;
    left: auto;
    float: none;
    width: auto;
    margin: 0 10px; 
}
    @media screen and (max-width: 498px) {
      #ig-page-view > div.equal-columns .ig-column {
        width: 100% !important;
        margin: 0; 
} 
}
  #ig-page-view > div.equal-columns .ig-row-pad {
    padding-right: 0;
    padding-left: 0; 
}
  #ig-page-view > div.equal-columns .ig-row-innerrow {
    display: flex;
    flex-wrap: wrap; 
}
  #ig-page-view > div.equal-columns .ig-grid-l {
    order: 1; 
}
  #ig-page-view > div.equal-columns .ig-grid-p {
    order: 2; 
}
  #ig-page-view > div.equal-columns .ig-grid-r {
    order: 3; 
}
  #ig-page-view > div.equal-columns.ig-row-4 .ig-column {
    width: calc(100% / 3 - 60px); 
}
    @media screen and (max-width: 767px) {
      #ig-page-view > div.equal-columns.ig-row-4 .ig-column {
        width: calc(50% - 40px); 
} 
}
  #ig-page-view > div.equal-columns.ig-row-2 .ig-column,
  #ig-page-view > div.equal-columns.ig-row-3 .ig-column {
    width: calc(50% - 40px); 
}

Configure the enhancement

  1. Navigate to the page you want to edit. 
  2. Select Actions and then Edit. 
  3. Place your widgets into the columns of a single page row.
  4. Select the </> icon in the top right-hand corner of the row.
  5. Add the class equal-columns, and select Done.
  6. At the bottom of the page, select Publish Page. 

See Applying custom CSS to page rows for more information. 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 equal-columns class from page rows to remove the effect. 

Use the enhancement

Members will view the widgets in an equal column layout.