Menu icon Foundation
Reveal modal width px

Hi. I'm creating a wrapper for the Foundation REVEAL plugin, but one thing eludes me: It is not possible to effectively work with PIXEL-based widths without flaws. Often, a modal window should be quite narrow, also on ultra-wide screens, to make minimal modal content compact and readable. The problem with the default width, as well as the width-class moderators (tiny, small, medium and so on ...), is that they all set the width as a % of the entire screen width.

For example, if I use the SMALL modifier, it will become 512px on a 1280 wide screen [screen], while if the visitor is on a 1920 wide screen, the modal will become 768px [screen]. Really not very useful if you want to limit the width to say 500px on ALL screens (while still scaling to max 100% on smaller screens per normal).

I can of course set SCSS variable to a pixel value, but then all my reveal modals will receive this width.

$reveal-default-width: 500px;

I was looking for a solution where I can set PX values on a per-modal basis, but this is not possible. I tried to set inline `style="width:500px"`, but this breaks the responsive layout positioning [screen] since the sizing values are not computed based on the inline style.

I was looking for some data-reveal-width, but this does not seem to exist. In my personal professional opinion, I don't see why reveal is percentage-based by default. Surely a set pixel value is mostly appropriate for modals on large screens, for control of content flow, while responding to max width 100% for small screens (obviously).

Perhaps I missing something? Thnx

reveal

Hi. I'm creating a wrapper for the Foundation REVEAL plugin, but one thing eludes me: It is not possible to effectively work with PIXEL-based widths without flaws. Often, a modal window should be quite narrow, also on ultra-wide screens, to make minimal modal content compact and readable. The problem with the default width, as well as the width-class moderators (tiny, small, medium and so on ...), is that they all set the width as a % of the entire screen width.

For example, if I use the SMALL modifier, it will become 512px on a 1280 wide screen [screen], while if the visitor is on a 1920 wide screen, the modal will become 768px [screen]. Really not very useful if you want to limit the width to say 500px on ALL screens (while still scaling to max 100% on smaller screens per normal).

I can of course set SCSS variable to a pixel value, but then all my reveal modals will receive this width.

$reveal-default-width: 500px;

I was looking for a solution where I can set PX values on a per-modal basis, but this is not possible. I tried to set inline `style="width:500px"`, but this breaks the responsive layout positioning [screen] since the sizing values are not computed based on the inline style.

I was looking for some data-reveal-width, but this does not seem to exist. In my personal professional opinion, I don't see why reveal is percentage-based by default. Surely a set pixel value is mostly appropriate for modals on large screens, for control of content flow, while responding to max width 100% for small screens (obviously).

Perhaps I missing something? Thnx