Mobile Responsive Summary Block Columns

What does this code do?

This code snippet will allow you to change the number of columns in a Grid Summary Block for different screen sizes.

Code Snippets

Copy and paste the code that matches the screen size(s) you would like to change in Design > Custom CSS.

/* Only Desktop */
@media only screen and (min-width: 992px) {
  
}

/* Only Tablet */
@media only screen and (min-width:640px) and (max-width: 992px;) {
  
}

/* Tablet and Above */
@media only screen and (min-width: 640px) {
  
}

/* Only Mobile */
@media only screen and (max-width: 640px) {
  
}

Then copy and paste the following code in between the brackets.

.summary-item-list {
 display: flex;
 flex-wrap: wrap;
}
.summary-item {
  width: 20% !important;
  margin: 2vw !important;
}

How To Use It

1. Choose the code that matches to the screen size you would like to change the layout for.

2. Copy and paste the code as indicated above.

3. Customize the width and margin until it shows the number of columns you would like. The code provided is set up for 4 columns.