Native padding of the Reveal Box Foundation stack

[Adri12 (Adriano)]

Hello everyone,

I am using RW8 with Foundation. I designed a Reveal box on one of my pages.

I tried it to style it a bit… like the example below

… but it looks like the Reveal box has a native border on all sides. So when I go and put a background colour on the 1 column stack that contains the header there is white padding on the left, right and top.

I tried to play with gutter settings and width, but nothing really major changed. Maybe I am not doing it right?

How can I remove the native white paddings on all sides of the box?

[swilliam (scott williams)]

The padding is actually on the reveal it’s self, 30px on each side, top and bottom.
if there is no setting in the reveal UI it’s self, you can target it with css and get rid of it on which ever area you wish.

.reveal-lightbox reveal-modal{
padding-top:0px;
padding-left:0px
etc.,etc.
}
I removed it on all for sides in this image:

[Adri12 (Adriano)]

Ace !!!

I haven’t p[aid attention to the settings of the reveal lightbox stack… I was just looking at reveal box settings.

I have found the option to make the content edge-to-edge.

Thank you so much

[joeworkman]

To make the reveal a little easier to use, I recommend launching it externally. You can do this easily with either a Foundation button or Call to Action (which I know you own).

By doing that you can pull the reveal outside of that 2 column and into the main body. This will make editing the contents a lot easier and simply the layout in edit mode.

[Adri12 (Adriano)]

Hello Joe, thanks for your advice. In fact I created a partial for the reveal box in order to make editing content smoother.
Cheers