Prog Prog - 2 years ago 105
Javascript Question

How to make Foundation 5 Reveal Popup responsive?

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


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


Included Script

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

  • image 2

Answer Source

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>

And you have to remove this line of css :

.reveal-modal {
  width: 100vw; //remove this line from your css
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download