Foundation Reveal size in small screen

Question

I'm using a reveal modal, but I've found - as documented - that in small screens the reveal is 100% of screen width and height, while I need some space... any idea?

Thank you

Answer 1

You have not provided any code or further details.

You can use the following classes on the reveal or create your own based on your needs:

tiny
small
large
full

https://foundation.zurb.com/sites/docs/reveal.html#sizing

On small screens, a modal is always 100% of the width of the screen. On medium-sized screens and larger, the width changes to 600px (see the $reveal-width setting).

Answer 2

I'm having the same issue. Foundation's reveal makes ALL modals at "small" go full screen. I would like to on occasions disable this for certain individual modals. I've looked in the settings file and there doesn't seem to be an option for this. Creating my own css to override this alone wouldn't be enough as reveal also uses JavaScript to set the distance from the top of the viewport.

Ideally we could have a class or attribute like data-reveal-small-full="false".

As a temp solution I've created a forced override of the styles reveal uses to create the small full-screen behavior.

/* Vertical center mixin
   ========================================================================== */

@mixin vertical-align($position: relative) {
    position: $position;
    top: 50% !important;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}


/* Force override of default reveal fullscreen for small behaviour 
   ========================================================================== */

[data-reveal-small-full="false"] {
    @include breakpoint(small only) {
        @include vertical-align();
        border-radius: $reveal-radius;
        height: auto;
        margin-left: auto;
        margin-right: auto;
        max-width: calc(100% - 20px);
        min-height: 0;
        width: $reveal-width;
    }
}