Quando usi "ispeziona elemento", nella parte bassa dello schermo si apre una sezione composta di due parti: a sinistra il codice html, a destra le regole css...
Passando il mouse su un tag html, chrome evidenzia nella parte superiore dello schermo l'elemento corrispondente;
purtroppo la struttura di joomla è un po' pesante e i template riflettono questo aspetto con tantissimi div uno annidato dentro l'altro, per cui a volte è difficile trovare la regola giusta; ti conviene sempre partire dal contenitore più esterno dell'elemento selezionato.
In particolare chrome evidenzia nella parte superiore in blu l'elemento selezionato e in rosso i suoi margini; ad esempio se noti che un elemento viene ridimensionato correttamente, ma i margini sono sballati, devi trovare il contenitore che porta ad evidenziare in rosso i margini; se viene solo evidenziato in blu, significa che molto probabilmente i margino sono settati da un contenitore genitore...
Una volta trovato l'elemento interessato, a sinistra puoi vedere tutte le regole css a lui assegnate e quelle ereditate dagli elementi genitori; ogni regola può essere attivata e disattivata tramite la checkbox e il suo valore cambiato per vedere in tempo reale gli effetti.
In particolare ho notato che il tuo slideshow viene ridimensionato una sola volta (al primo sotto contenitore), tra 959 e 768px con queste regole:
.box_skitter, .container_skitter {
width:768px !important;
max-height:100%;
}
Nei successivi contenitori (mobile landscape e mobile portrait) per le risoluzioni inferiori, non viene più ridimensionato... Addirittura per la risoluzione minore c'é un display:none che dovrebbe rimuovere lo slideshow sui cellulari in verticale, ma non ha effetto perché evidentemente è applicato al container sbagliato...
Come ho detto devi fare un po' di tentativi, perché è difficile per me analizzarlo online e questi template sono parecchio ridondanti di div annidati e hanno dei css che son dei campi di battaglia
