Articles "Add-On" - Gap Bettwen Columns
Helder Custodio
Hello,
I want to ask for a small correction to Pagebuilder or instead that you tell me how can i solve the small issue i've found.
After this most recent update, i've found a small, but anoying issue.
I'm using the "Articles" add-on for the front page with six columns and 24 articles. The problem is that there is no gap bettwen columns, so the images of the articles show up "glued" one to the other, 6 per line. This is only for Desktop or Laptot screens.
I'm sure there is a better way to solution this issue, but the one i've found was to edit the file Pagebuilder.css wich is far from ideal. Once you update the component, my solution is gone, and i will have to re-edit it again
Here is the "solution" i've used
Original code: .sppb-col-2 { -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667%; }
.sppb-col-3 { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; }
Modified code: .sppb-col-2 { -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 15.666667%; margin-left: 0.5%; }
.sppb-col-3 { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 24%; margin-left: 0.5%; }
How can i get this result without messing around with this file?
Thank you advance
Pavel
Accepted Answerbut the one i've found was to edit the file Pagebuilder.css
Hi. Never edit core files. You should place your code in template css file for custom code. In Helix it is custom.css file (read Helix doc). In Cassiopea it is user.css.
And your code looks like a crutch. Correct code for gap bettwen columns should be like that
.sppb-col-2 {
padding-left: 15px;
padding-right: 15px;
}