styling options in rows

Beaver Builder
1

Dear bb-team

I need to set a border and shadow to a row (3 rows). It seems that there is no way to set a spacing between to rows? Inserting a value for padding or margin only applies to the content of the row. I then tried to put 5 rows where the two “middle” rows should do the spacing. But I can’t set row width below 10% (I needed 3%). Is there a way to solve this problem? Hope you have a solution.

Thanks
-Dominic

2

Hey Dominic! I think I understand what you need here. Have you tried putting the border/shadow on the row-content-wrap instead of the row itself? I think this will give you the effect you’re looking for. So, if you gave a row a class of shadow-row, your CSS would look something like this:

.shadow-row .fl-row-content-wrap {
  border: 1px solid red;
  box-shadow: 0 0 5px rgba(0,0,0,0.3);
}

Let me know if that works for you. If not, could you try to find a visual example of the look you’re trying to accomplish. That might help me figure it out. :slight_smile:

Thanks!

3

Hey Robby

Thanks for your reply. That works fine, thanks. The problem was that I have 3 elements within one row so I had to set 3 different css styles: .shadow-row-top; shadow-row-middle; shadow-row-bottom. The result looks good, you can have a look at it here: http://beratungspraxis.tschancreative.com (the 3 rows: Judith Hochstrasser, Yvonne Fischer, Ulli Iten).
But the result is not yet perfect: If you take a close look you can see that there are 3 different shadows. I also was not able to make the shadow on the bottom of the box a little bit thine.

Thanks, Dominic

4
It seems that there is no way to set a spacing between to rows? Inserting a value for padding or margin only applies to the content of the row.

Unless I am completely misunderstanding your request, adding spacing between subsequent rows is easy :slight_smile:

Row > Row Settings > Advanced > Margin > Top & Bottom > set as required > Save

This will adjust the row spacing.

To set the border for the row, same place:

Row > Row Settings > Style > Border > set as required for all parameters > Save

For the row shadow, back to:

Row > Row Settings > Advanced > CSS Selectors > Class > shadow-row (NO period) > Save

Depending upon which theme you are using, add Robby’s code to your CSS editor > Save

That should do it :slight_smile:

BTW, a VERY nice looking site! :slight_smile:

5

Hey Lyle and Robby

Thanks a lot! Robby’s code did not work, I had to adjust it to:

.shadow-row .fl-col-content {
background-color: #fafafa;
-moz-box-shadow:    0px 0px 5px 1px rgba(0,0,0,0.3);
-webkit-box-shadow: 0 0px 5px 1px rgba(0,0,0,0.3);
box-shadow:         0 0px 5px 1px rgba(0,0,0,0.3);
-moz-border-radius: 5px;
border-radius: 5px;
}

Now it looks as it should.

Best
Dominic

6

Oh good! Glad that worked for you, Dominic! Thanks for sharing the cross-browser code too. :slight_smile: