{"id":3599,"date":"2021-01-16T08:27:19","date_gmt":"2021-01-16T08:27:19","guid":{"rendered":"https:\/\/ibex.tech\/wordpress-sites\/?p=3599"},"modified":"2022-02-17T07:15:07","modified_gmt":"2022-02-17T07:15:07","slug":"row-of-column-boxes","status":"publish","type":"post","link":"https:\/\/ibex.tech\/wordpress-sites\/page-builders\/divi-wordpress-addons\/rows-and-columns\/row-of-column-boxes","title":{"rendered":"Row of column boxes"},"content":{"rendered":"\n

Creating tiles of boxes by using columns<\/h4>\n\n\n\n

Insert a “Regular” page section.<\/p>\n\n\n\n

Insert a row with the number of columns you want to create you boxes<\/p>\n\n\n

Insert a “Regular” page section.<\/p>\n

Insert a row with the number of columns you want to create you boxes<\/p>\n

Row settings<\/p>\n

Use custom gutter width<\/p>\n

Yes if you want to be able to remove the cap between columns (set Gutter Width = 1)<\/p>\n

Equalise column heights = YES<\/p>\n

Width and max width<\/p>\n

Can be set to 100% if you want to go full screen width<\/p>\n

Marging and padding = 0<\/p>\n

Then for each of your column settings<\/p>\n

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.\u00a0 An example:<\/p>\n\n\n

.home_page_info_squares {\r\n  margin: 0px;\r\n  padding: 26px;\r\n  color: #000;\r\n  font-weight: 600;\r\n  font-size: 1.6em;\r\n  line-height: 1.4em;\r\n}<\/code><\/pre>\n\n\n\n
Altering how the wrap occurs on smaller tablet and phone screens<\/p>\n\n\n\n
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.<\/p>\n","protected":false},"excerpt":{"rendered":"
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 […]<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[246],"tags":[],"class_list":["post-3599","post","type-post","status-publish","format-standard","hentry","category-rows-and-columns"],"_links":{"self":[{"href":"https:\/\/ibex.tech\/wordpress-sites\/wp-json\/wp\/v2\/posts\/3599","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ibex.tech\/wordpress-sites\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ibex.tech\/wordpress-sites\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ibex.tech\/wordpress-sites\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/ibex.tech\/wordpress-sites\/wp-json\/wp\/v2\/comments?post=3599"}],"version-history":[{"count":3,"href":"https:\/\/ibex.tech\/wordpress-sites\/wp-json\/wp\/v2\/posts\/3599\/revisions"}],"predecessor-version":[{"id":3604,"href":"https:\/\/ibex.tech\/wordpress-sites\/wp-json\/wp\/v2\/posts\/3599\/revisions\/3604"}],"wp:attachment":[{"href":"https:\/\/ibex.tech\/wordpress-sites\/wp-json\/wp\/v2\/media?parent=3599"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ibex.tech\/wordpress-sites\/wp-json\/wp\/v2\/categories?post=3599"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ibex.tech\/wordpress-sites\/wp-json\/wp\/v2\/tags?post=3599"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}