iframe responsive su Altersito

[monteleonemeteo]

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

[alemoppo]

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à:
  

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

• aggiungere al css questo 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!

[monteleonemeteo]

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

[alemoppo]

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!

[monteleonemeteo]

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

[alemoppo]

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:

<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!

[monteleonemeteo]

Grazie, ora funziona perfettamente!