Come rendere responsive Foundation 5 Reveal Popup?

Question

Sto usando l'ultima versione di Foundation Foundation 5, voglio usare Reveal Popup nel mio progetto, ho cercato di implementare usando il seguente codice e i file .js.

Sta funzionando bene in schermi di grandi dimensioni come laptop e tablet, ma quando provo ad aprire la mia pagina su dispositivi di piccole dimensioni come il cellulare, quindi non viene visualizzato correttamente devo andare a destra e sinistra nel mio schermo mobile per vedere l'intero popup.

• Incluso 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" />

• parte HTML

Per favore aiutami o suggeriscimi se ho perso qualcosa nel codice sopra.

• immagine 2

Answer 1

utilizzare le classi di rete in-built della fondazione 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> 

E si deve rimuovere questa linea di css:

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

Answer 2

In _reveal.scss modificare la sezione @media #{$small-only}.

aggiungere la riga width: 90vw;

Esso dovrebbe essere simile a questo quando si è fatto:

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

È anche possibile rimuovere la linea di min-height:100vh; se non si desidera che il modale verticale riempire lo schermo sul cellulare dispositivi.

Questa soluzione non richiede l'uso di colonne della griglia.

Answer 3

Le altre risposte funzioneranno, una specie di. Questo in realtà è dovuto al fatto che la fondazione non applica più il ridimensionamento della casella: border-box a tutti gli elementi su tutta la linea. Sta aggiungendo l'imbottitura alla larghezza complessiva del 100%, che la spinge fuori dal corpo.

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