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
}