Salve, sto cercando di rendere responsive un mio sito web avente un css per l'home page e un altro per tutte le pagine interne.
Pian piano ci sto riuscendo, ma sono bloccato su un paio di questioni...
Nella home page è presente un'immagine di copertina che cambia casualmente secondo un JavaScript di questo tipo:
codice:
<script language="JavaScript"> <!--
img = new Array()
ran = Math.floor(3 * Math.random());
img[0] = 'immagine0.jpg';
img[1] = 'immagine1.jpg';
img[2] = 'immagine2.jpg';
document.write("<img src=\"gallery"+"/"+img[ran]+"\">");
// -->
</script>
Per il logo me la sono cavata facilmente scrivendo questa istruzione CSS:
codice:
#logo IMG { display: block; margin: 0em auto; width: 100%; max-width: 720px; }
Ma con l'immagine scelta dal JavaScript non so come muovermi, ammesso che si possa fare: le immagini sono tutte delle stesse dimensioni e c'è un blocco <div></div> dedicato...
Discorso analogo con una serie di video scelti con un JavaScript simile, dove tuttavia sono indicate le dimensioni del player in pixel e non in em.
Siccome attualmente l'home page è sviluppata su 4 colonne (due esterne più strette e le due interne con l'immagine e il video più larghe), l'intenzione sarebbe che in caso di visualizzazione da smartphone, le due colonne centrali si disponessero una sotto l'altra adattandosi alla larghezza del display come già succede con il logo.
Si può fare qualcosa o c'è incompatibilità in tal senso?