Articles "Add-On" - Gap bettwen columns - Forum | JoomShaper
Staff replied SP Page Builder

Articles "Add-On" - Gap bettwen columns

Asked by Helder Custodio 3 years ago Last activity 3 years ago

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

3 replies

Hans
3 years ago · edited

Hi,
same problem

Pavel
3 years ago · edited

but 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;
}
Mehtaz Afsana Borsha Staff

Hi

Thanks for contacting us. You can follow Pavles instructions and its highly recommended not to touch on our core files.

-Regards.

Log in to reply.