Support Forums

Support Online : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

Giving 3 columns background color - spaces between cols?

Featured Lock Resolved
Hi there,
maybe I am missunderstanding something - but I have following problem:

I am trying to rebuild This Page with This Page with the SP Page Builder and I am having following problem:

With pagebuilder I can give rows background colors. So I set the background-color of the 2nd section to red. When I do that, the situation is like you see it in my examples. I understand, that I have to give the column the BG color, so that the red area will stop at the content of the page, and not at the browser end-width. But then the situation is like in the screenshot I attached. There are the margin-spaces which interrupt the red area.

Can you please give me a hint what to do to let it appear like in the reference-page?`

Thanks for your help,
kweb

Attachments (1)

  • screen.jpg
    screen.jpg 102.3 KB

12 Answers

Paul Frankowski - Staff

More than a month ago #Permalink
HI,
right now on presented subpages you have one solid red background,
and you want to get effect like on screenshot, right?
If yes, you have to add background color only for columns + margins.

Pavel

More than a month ago #Permalink
Add inner row with background.
http://dl3.joxi.net/drive/2017/10/06/0008/0401/545169/69/2f614bbf19.png

Paul Frankowski - Staff

More than a month ago #Permalink
@Pavel, indeed, This is also good solution,
short guide in SPPB manual : https://www.joomshaper.com/documentation/sp-page-builder/sp-page-builder-2-x#how-to-use-nesting-rows

kweb

More than a month ago #Permalink
Hi guys,
thank you for your help! I could solve the problem. I made the mistake and added a row and then did not add another row in the column, instead I already added the add-ons. Would be great to have the possibility to add a nested row afterwards but when you know how it works its easy done.

Now I have the similar problem in the footer. Please check this page and have a look at the bottom. I have added a row in the helix template (Layout) and added a 6+6 columns. Now I need to set the background to #ffffff but I dont have the possibility to add a background color.

I can try with .css but then it results like in the screenshot attached....

I dont have the the possibility to add a nested row here. Can you tell me how this must be done now?

kweb

Attachments (1)

  • Screenshot-2017-10-6 Home.png
    Screenshot-2017-10-6 Home.png 341 KB

Paul Frankowski - Staff

More than a month ago #Permalink
you can add BG colors also via custom CSS, for any element.
It's very basic, you have to insert class name, and then define bg color for it.

kweb

More than a month ago #Permalink
Hi Paul - yes I know but please have a look to my screenshot. When I give the bg color to the row, also the 15px margin left and right is colores.

See the screenshot attached in this reply what happend when I set bg color to the columns. Its not that easy because the nested row is missing.

Attachments (1)

  • Screenshot-2017-10-6 Home(1).png
    Screenshot-2017-10-6 Home(1).png 474 KB

Paul Frankowski - Staff

More than a month ago #Permalink
Add inside padding, this should solve problem of "no air"

Pavel

More than a month ago #Permalink
I dont have the the possibility to add a nested row here. Can you tell me how this must be done now?

kweb


Remove the row from Helix. Use the inner row SP PB with two columns and two add-ons Joomla module to output the positions buttom1 and buttom2.

kweb

More than a month ago #Permalink
I dont have the the possibility to add a nested row here. Can you tell me how this must be done now?

kweb


Remove the row from Helix. Use the inner row SP PB with two columns and two add-ons Joomla module to output the positions buttom1 and buttom2.


@Pavel: Well but then I have to add those rows on every site I want to create when I do that with pagebuilder, right?

@Paul: When I add padding to

section#sp-section-5 div.container div.row div#sp-bottom1.col-sm-6.col-md-6 div.sp-column

this will not close the gab between the 2 columns.

kweb

Paul Frankowski - Staff

More than a month ago #Permalink
I am quite blind, seeing only front-end
but there is a option "Remove Gutter" for ROWS which remove space between columns.

kweb

More than a month ago #Permalink
This would be the solution but I cannot find it on helix layout options. Can you send me a screenshot where to find this?

Pavel

More than a month ago #Permalink
I looked through the code of your site. You have set the background for the column instead of setting the background for the row.
So you need to go back to method that you described here.

You do not need to fix Helix row with menu. You need to fix everything else. Helix row with menu has a width of 1170px, as it should be. All the rest has a width of 1140px, because you used the background of the column instead of the background of the row.
The screenshot highlights the row and you can see its real size.
http://dl4.joxi.net/drive/2017/10/06/0008/0401/545169/69/201e73b3ed.png
When I add a background to the row, everything gets right.
http://dl3.joxi.net/drive/2017/10/06/0008/0401/545169/69/914a441c21.png


There are no replies made for this post yet.
However, you are not allowed to reply to this post.

Leaderboard (30 days)

Paul Frankowski

Paul Frankowski

Total Accepted Answers: 146
Toufiq

Toufiq

Total Accepted Answers: 40
Sifat

Sifat

Total Accepted Answers: 20
Rifat Wahid Alif

Rifat Wahid Alif

Total Accepted Answers: 12
Pavel

Pavel

Total Accepted Answers: 6

100+

Templates

200,000+

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam