Center summaries

This is how to center summaries on your pages.

/* SUMMARIES – center
- - - - - - - - - - - - - - */

.sqs-block-summary-v2 .summary-item-list {
    text-align: center;
}

.sqs-block-summary-v2 .summary-item.positioned {
    float: none;
    display: inline-block;
    margin-right: 1% !important;
    margin-left: 1% !important;
    vertical-align: top;
}

Note. This code blocks squarewebsites.org’s excellent Lazy Summaries for displaying summary items side by side on mobile/tablet. The solution is to wrap the code in a media query, making it work above for example 768px’s width.

@media @768min {

#section-id {

.sqs-block-summary-v2 .summary-item-list {
    text-align: center;
}

.sqs-block-summary-v2 .summary-item.positioned {
  float: none;
  display: inline-block;
  margin-right: 2% !important;
  margin-left: 2% !important;
  vertical-align: top;
  }
 }
}