How to make Foundation 5 Reveal Popup responsive?

Question

I am using Foundation’s latest version Foundation 5, I want to use Reveal Popup in my project, I tried to implementing using following code and .js files.

It’s working fine in Large displays like Laptop and tablets, but when I try to open my page in small devices like mobile then it’s not showing properly I have to travel right and left in my mobile screen to see entire popup.

• Included CSS

  <link href="../../Content/foundation/css/foundation.css" rel="stylesheet" type="text/css" /> <link href="../../Content/foundation/css/normalize.css" rel="stylesheet" type="text/css" />

• HTML part

Please help me or suggest me if I missed anything in above code.

• image 2

Answer 1

Use the foundation's in-built grid classes large-10 small-10 medium-10

<div id="myModal" class="reveal-modal large-10 small-10 medium-10 columns" data-reveal>
  <h2>Popup title.</h2>
  <p class="lead">Your couch.  It is mine.</p>
  <p>Im a cool paragraph that lives inside of an even cooler modal. Wins</p>
  <a class="close-reveal-modal">&#215;</a>
</div>

And you have to remove this line of css :

.reveal-modal {
  width: 100vw; //remove this line from your css
}

Answer 2

In _reveal.scss edit the @media #{$small-only} section.

add the line width: 90vw;

It should look like this when you are done:

@media #{$small-only} {
  min-height:100vh;
  width: 90vw;
}

You can also remove the line min-height:100vh; if you do not want the modal to vertically fill the screen on mobile devices.

This solution does not require use of grid columns.

Answer 3

The other answers will work, sort of. This is actually due to foundation no longer applying box-sizing:border-box to all elements across the board. It is adding the padding to the overall reveal 100% width, which pushes it outside the body.

.reveal-modal {
    box-sizing:border-box;
    min-height:0 /* If you want to remove the full viewport height effect */
}