Menu icon Foundation
Adjust Reveal modal to size of content

What I am loading are images, but they are of varying sizes (tall and narrow, short and wide, square) so it is important that the modal fit the content and still center. I am playing with the CSS for Reveal , but not getting what I need. I have seen work done using an inner div to "hack" the look, but that breaks the close behavior if the browser too wide.

Anybody have thoughts on this? thanks.

revealmodal

What I am loading are images, but they are of varying sizes (tall and narrow, short and wide, square) so it is important that the modal fit the content and still center. I am playing with the CSS for Reveal , but not getting what I need. I have seen work done using an inner div to "hack" the look, but that breaks the close behavior if the browser too wide.

Anybody have thoughts on this? thanks.

Rafi Benkual over 5 years ago

Have you tried using the built in class sizes?

The class options:

tiny: Set the width to 30%.
small: Set the width to 40%.
medium: Set the width to 60%.
large: Set the width to 70%.
xlarge: Set the width to 95%.

<div id="myModal" class="reveal-modal xlarge" data-reveal>