Creating tiles of boxes by using columns

Insert a “Regular” page section.

Insert a row with the number of columns you want to create you boxes

Insert a “Regular” page section.

Insert a row with the number of columns you want to create you boxes

Row settings

Use custom gutter width

Yes if you want to be able to remove the cap between columns (set Gutter Width = 1)

Equalise column heights = YES

Width and max width

Can be set to 100% if you want to go full screen width

Marging and padding = 0

Then for each of your column settings

Can be easiest to create a CSS_Class and assign it to each, so you don’t need to copy settings to every one every time you change something.  An example:

.home_page_info_squares {
  margin: 0px;
  padding: 26px;
  color: #000;
  font-weight: 600;
  font-size: 1.6em;
  line-height: 1.4em;
}

Altering how the wrap occurs on smaller tablet and phone screens

Setting a css min width properly for each column or the element you put in it doesn’t seem to work, you just get clipping occurring. The best solution is probably to duplicate the row and set the Advanced > Visibility for each to different screen sizes and then adjust to how you want each row to be laid out.

USEFUL?
We benefit hugely from resources on the web so we decided we should try and give back some of our knowledge and resources to the community by opening up many of our company’s internal notes and libraries through mini sites like this. We hope you find the site helpful.
Please feel free to comment if you can add help to this page or point out issues and solutions you have found, but please note that we do not provide support on this site. If you need help with a problem please use one of the many online forums.

Comments

Your email address will not be published.