adattare iframe a varie risoluzioni

Ciao a tutti. Sto realizzando un sito web fluido in modo che si adatti alle varie risoluzioni di tutti i dispositivi da pc a telefoni e tablet. Sto incontrando un problema nel far adattare il frame di google calendar ai dispositivi mobili. Praticamente li ho inserito width="90%" ma fin che la risoluzione è alta il tutto funziona ma quando comincia ad essere la risoluzione di un dispositivo mobile il calendario va un po fuori schermo ed è lunica cosa che va fuori dal layout e quindi mi si attiva la barra di navigazione. Come devo fare per farlo restare sempre al 90%? Grazie

Puoi indicare l'indirizzo della pagina in questione?

Per ora il sito non è ancora online. Però è impostato così:

<div id="service" class="service">
<div class="container">
<h3>EVENTI</h3>
<div class="service-grids">

<iframe src="https://calendar.google.com/calendar/embed?showTitle=............;color=%235F6B02&amp;c tz=Europe%2FRome" style="border-width:0" width="90%" height="600" frameborder="0" scrolling="no"></iframe>


</div> </div> </div>