Skip to content

Instantly share code, notes, and snippets.

@steedancrowe
Created August 16, 2018 12:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save steedancrowe/80d98979afbe28a67db31f0a8a07db88 to your computer and use it in GitHub Desktop.
Save steedancrowe/80d98979afbe28a67db31f0a8a07db88 to your computer and use it in GitHub Desktop.
a quick bit of CSS to turn Divi pricing tables into grids, some customization required depending on number of columns
.custom-pricing-table .et_pb_pricing {
display:grid;
grid-template-columns:100%;
}
.custom-pricing-table .et_pb_pricing_table_wrap {
display: grid;
grid-column-gap:10px;
grid-template-columns: 25% 25% 25% 25%!important;
}
.custom-pricing-table .et_pb_pricing_table {
width: auto!important;
display: grid;
grid-template-rows: 20% 10% 1fr 10%!important;
}
.et_pb_column_4_4 .custom-pricing-table .et_pb_pricing_table{
max-width:100%!important;
}
@media screen and (max-width:1000px){
.custom-pricing-table .et_pb_pricing_table_wrap {
grid-template-columns: 50% 50%!important;
}
}
@media screen and (max-width:700px){
.custom-pricing-table .et_pb_pricing_table_wrap {
grid-template-columns: 100%!important;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment