Menu icon Foundation
Foundation 6 - Custom breakpoints bug with reveal modal

I'm having a problem getting the Reveal modal to operate correctly at the smallest custom breakpoint I created.

I'm using a customized version of the Basic Template (seen here) to create additional breakpoints for Foundation (Sites v6.2.3). This is shown in the _settings.scss snippet below:

// 2. Breakpoints
// --------------

$breakpoints: (
  smallest: 0,      //phone
  small:    480px,  //phone
  medium:   600px,  //phone
  large:    768px,  //tablet
  xlarge:   992px,  //desktop tablet-landscape
  xxlarge:  1200px, //desktop
  xxxlarge: 1440px, //desktop
);
$breakpoint-classes: (smallest small medium large xlarge xxlarge xxxlarge);



The breakpoints have been working great, but I have an issue when using the Reveal modal and can't figure out what to do about it. At the small and above breakpoints, the modal works just fine, floating in front of the page with the background page being visible through a transparent background like so:
Modal working normally

Upon inspection I see these stylings:
modal-working stylings

However, when getting down to the 'smallest' breakpoint (470px and below) the modal breaks, is no longer positioned correctly and has no transparent background. As seen below: 

modal broken at smallest breakpoint

 

Stylings: 

modal-broken stylings

 

Any ideas as to why this could be? 

sites6breakpointsbreakpointcustomrevealmodalsmallest

I'm having a problem getting the Reveal modal to operate correctly at the smallest custom breakpoint I created.

I'm using a customized version of the Basic Template (seen here) to create additional breakpoints for Foundation (Sites v6.2.3). This is shown in the _settings.scss snippet below:

// 2. Breakpoints
// --------------

$breakpoints: (
  smallest: 0,      //phone
  small:    480px,  //phone
  medium:   600px,  //phone
  large:    768px,  //tablet
  xlarge:   992px,  //desktop tablet-landscape
  xxlarge:  1200px, //desktop
  xxxlarge: 1440px, //desktop
);
$breakpoint-classes: (smallest small medium large xlarge xxlarge xxxlarge);



The breakpoints have been working great, but I have an issue when using the Reveal modal and can't figure out what to do about it. At the small and above breakpoints, the modal works just fine, floating in front of the page with the background page being visible through a transparent background like so:
Modal working normally

Upon inspection I see these stylings:
modal-working stylings

However, when getting down to the 'smallest' breakpoint (470px and below) the modal breaks, is no longer positioned correctly and has no transparent background. As seen below: 

modal broken at smallest breakpoint

 

Stylings: 

modal-broken stylings

 

Any ideas as to why this could be? 

Daniel about 3 years ago

I manually fixed it by including the following styling in my project:

    @media screen and (max-width: 29.9375em) {
        #myModal {
            top: 100px;
            left: 0px;
            margin-left: auto;
            margin-right: auto;
            height: auto;
            min-height: 0;
            margin-left: auto;
            border: 1px solid #cacaca;
        }
    }