Three-Column Divi Portfolio Layout: Legacy CSS Example
By George Nicolaou
This recording changes a Divi portfolio grid from four columns to three with CSS. The original rule is retained below so the example remains understandable.
Start with native layout controls
Check whether your current portfolio module offers the column and spacing controls you need. A native option is easier to maintain than a rule tied to an older generated class structure.
Understand the rule
The snippet changes project width and margins inside a full-width column. Those percentages and fixed gaps are a particular layout choice, not a universal three-column formula. Copying them into a different container can create overflow or uneven rows.
Check each breakpoint
Test long titles, different image shapes and the final incomplete row. On a phone, reduce the number of columns instead of shrinking cards until the text becomes unreadable. Scope any custom CSS to this module so other portfolio grids remain predictable.
Related guides
/* Change projects protfolio columns from 4-3 start */.et_pb_column_4_4 .et_pb_portfolio_grid .project {
clear: none !important;
margin: 0 60px 42px 0 !important;
width: 27% !important;
}
/* Change projects protfolio columns from 4-3 end */
0 Comments