iframe responsive su Altersito

Buongiorno,
vorrei rendere responsive gli iframe inseriti nel mio Altersito.
Ad esempio, la tabella dei dati meteo rilevati a questa pagina http://monteleonemeteo.altervista.org/dati-meteo.html vorrei si adattasse automaticamente quando visualizzo il sito da dispositivo mobile.
Ho guardato in rete alcuni tutorial e pare che questo comporti la modifica del file CSS.
Non conoscendo bene il linguaggio html, non so se vi siano soluzioni alternative e avendo progettato il sito tramite Altervista e non tramite un editor html, non vorrei combinare dei danni...
Ad ogni modo, vi chiedo aiuto su come fare.

Grazie

Su AlterPages non è possibile inserire CSS personalizzato. Altrimenti potevi fare in questo modo:

• aggiungere all'iframe un id ad esempio "iframe_meteosystem", quindi aggiungi all'iframe la scritta id="iframe_meteosystem"
  quindi diventerà:
  
  Codice HTML:

  ---

  <iframe src="http://www.meteosystem.com/wlip/monteleone/tabella.php" id="iframe_meteosystem" width="670" etc etc

  ---

• aggiungere al css questo codice:
  
  Codice:

  ---

  @media (max-width: 700px)
{
        #iframe_meteosystem
        {
                transform: scale(0.70)
        }
}

  ---

Nel tuo caso, potresti comunque rimpicciolirlo sempre tramite transform:scale(), ma ne risentirebbe la navigazione da pc.

Ciao!

E se intervengo sul file style.css tramite ftp inserendo i codici che mi hai dato, rischio di fare disastri?

No, non fai alcun disastro. Però alterPages è fatto in modo tale che in un futuro accesso al pannello amministrativo (quello che si accede con il tasto edit), qualsiasi modifica viene resettata.

Ciao!

Ciao, ci ho provato ma non è cambiato nulla. Probabilmente ho incollato il codice nella parte sbagliata del file Style.css.
L'ho incollato nella sezione 04: Content
Di seguito ti incollo il codice completo della sezione:

/*
* 04: Content
*/


.site-paged #page,
.site-boxed #content {
background-color: #ffffff;
}
@media (max-width: 767px) {
.site-boxed #content {padding: 5%;}
}
@media (min-width: 768px) and (max-width: 1279px) {
.site-boxed #content {padding: 15px;}
}
@media (min-width: 1280px) {
.site-boxed #content {padding: 20px;}
}
@media (max-width: 700px)
{
#iframe_meteosystem
{
transform: scale(0.70)
}
}

Ovviamente ho inserito l'ID nel codice dell'iframe

Hai fatto le modifiche correttamente. Però la proprietà "transform" è definita direttamente nell'html ed ha la precedenza, quindi non viene modificato dal css esterno.

Prova eliminando tutte le varie proprietà "transform" dal tag <iframe>, una cosa del genere:

Codice HTML:

---

<iframe src="http://www.meteosystem.com/wlip/monteleone/tabella.php" id="iframe_meteosystem" width="670" height="300" scrolling="no" frameborder="0" vspace="0" hspace="0" marginwidth="0" marginheight="0" style="border: 0;  -ms-transform-origin: 0 0; -moz-transform-origin: 0 0; -o-transform-origin: 0 0; -webkit-transform-origin: 0 0; transform-origin: 0 0">&amp;amp;amp;amp;amp;amp;amp;amp;lt;</iframe>

---

Ciao!

Grazie, ora funziona perfettamente!