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:
Upon inspection I see these 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:
Any ideas as to why this could be?