CODEWITHSUNDEEP
responsive-designmodal-dialogzurb-foundationzurb-reveal
Giovanni Zangrossi
Giovanni Zangrossi

Reputation: 21

Foundation Reveal size in small screen

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

Upvotes: 2

Views: 975

Answers (2)

Tim
Tim

Reputation: 183

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;
    }
}

Upvotes: 1

user753676
user753676

Reputation:

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).

Upvotes: 0

Related Questions