Hi, how to get multiple background colors in a row in SPPB?
example:
Staff replied
SP Page Builder
Multiple colors in a row
10 replies
Rashida Rahman Staff
Hi there!
If you have multiple columns within your row then you can use the column options to set a background color for each column. Here are screenshots for your ease:
Hope this helps!
Best Regards
Robert Asked this
I understand that but only the width of the column will have another backgroundcolor doing that. Then you want the 2 colors both 50% of full pagewidth you have to set the row to fluid which have also inpact on the content position. The content moves towards the side of the page because you make it fluid. The content must remain within the normal content pagewidth. Not also set to fluid.
Paul Frankowski Senior Staff
4 years ago
· edited
If I may...
One main Row, two Nested Rows inside - the right one get the bg color.
OR
bg image with right color and white/transparent left and centered in the row, old method but still should work.
Robert Asked this
I see, I have to play with the padding of the addon. Then it shows fine. Even when the row is set to fluid.
Paul Frankowski Senior Staff
yes, playing with paddings is on your side.
Rashida Rahman Staff
Hello,
Well, I thought you wants different colors for each column within a row.
However, there is an easier way to achieve what you want I believe with the help of gradient background of section/row. You need to adjust the color position values, gradient type, and angle.
Here is the screenshot:
https://prnt.sc/qeRK0NqL-qpR
Hope this helps!
Best Regards
Robert Asked this
4 years ago
· edited
Got it already:
Thx!!
Discovering more and more fun things you can so in SPPB!
What would work faster is that only the background goes full width (fluid) and the content stays within page wide. Now you have to spend quite some time on responsive settings. Is there a way to do that? Now had to play with paddings using element inspection for different mobile and tablet views.
Paul Frankowski Senior Staff
I the world of XX mobile screen sizes webmaster job is not so easy as it was.
BTW
Consider using different values for padding not only old school "px" - then should be easier to set for mobile views.
Robert Asked this
Agree, so many different devices and sizes..
Rashida Rahman Staff
Hi Robert!
I am glad that you have made it and working with SPPB is fun to you now:)
However, I'm not sure exactly what you are asking afterwords, but you can set padding/margin values for 3 different device sizes currently in your section settings. And you have responsive settings within each column also.
Here are the screenshots:
These settings can help you towards responsivenes of your site I hope!
Best Regards
Log in to reply.