Native padding of the Reveal Box Foundation stack

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?

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{
I removed it on all for sides in this image:


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 :slight_smile:

1 Like

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.

1 Like

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

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.