Creare un solo template che si adatti a tutti gli schermi (Responsive) non puoi........

Alcune soluzioni alternative:

1) Crei una copia del sito in una sottocartella "Mobile" del tuo dominio e imposti il template con dimensioni adatte agli schermi di smartphone e tablet

2) Rifai il sito con un cms che usi template grafici responsive preimpostati

3) Tieni solo il sito che hai fatto, si vede già comunque sui dispositivi anche se in dimensione ridotta e difficilmente leggibile

... credo che i 990 Px che hai usato, (rispetto ai 960 Px in genere consigliati),  siano pur sempre adatti ai dispositivi "mobile"; ...hai verificato l'aspetto su di essi...?... ...la pagina si dovrebbe adattare automaticamente riducendosi al tipo di dispositivo destinatario...

... io non ho di quei cosini per verificare; ... magari altri potrebbero darti qualche parere...

.

ciao

Scusatemi, ma sono alle prime armi, ma se io volessi adattare tale contenuto per farlo andare sui dispositivi mobili, come posso fare. Grazie

<script type="text/javascript" src="files/jquery.vegas.min.js"></script>
<link rel="stylesheet" type="text/css" href="files/background-gallery-styles.css" />
        
<script type="text/javascript">
$(function() {
$.vegas('slideshow', {
delay:6000,
backgrounds:[
{ src:'files/slide1.jpg', fade:1000 },
{ src:'files/slide2.jpg', fade:1000 },
{ src:'files/slide3.jpg', fade:1000 }            
]
})
});
</script>
        
<script type="text/javascript">
$(document).ready(function(){
var h = $('body').outerHeight(true);
var hwin = $(window).height();
if(h < hwin){
$("div#imFooterBg").css({
'position':'fixed',
'bottom':'0'
});
};
});
</script>
        

<style>        

#imHeader {position: fixed;width: 960px; z-index:10001; }
#imHeaderBg{position: fixed; z-index:10001;}
#imMnMn{position:fixed;top:91px; left:auto;z-index:10001;}
#imContent{top:130px;}
#imContentGraphics{top:130px; height:100%;}
#imPgMn{top:5px;margin-right:0px;}
#imFooter, #imFooterBg{position:fixed;z-index:10001;bottom:0;}


/*---------copyright----------*/
.copyright {  
width:700px;
margin:auto;
font-family: 'helvetica', arial, sans-serif;
text-align: left;
text-transform: uppercase;
line-height: 2;
font-size: 10px;
color: #111;
cursor:default;
}
                                        
.copyright .left {
text-align: left;
width:75%; float:left;
}
        /*plugin  bottone */

a.btn{
padding:5px 20px 5px 20px;  
color:#fff; margin:5px;
display:inline-block;
font-size:12px;
font-weight:400;
text-decoration:none;
-moz-border-radius:2px;
-webkit-border-radius:2px;
 border-radius:2px;

}
        
a.btn.dark{background:#666; color:#fff;}
a.btn.dark:hover{color:#FFF; background:#333;}
        
a.btn.red{background:#C00; color:#fff;}
a.btn.red:hover{color:#FFF; background:#900;}
        
        
a.btn.green{background:#69C524; color:#fff;}
a.btn.green:hover{color:#FFF; background:#390;}
        
a.btn.blu{background:#098EB5; color:#fff;}
a.btn.blu:hover{color:#FFF; background:#069;}
        
a.btn.purple{background:#8279A8; color:#fff;}
a.btn.purple:hover{color:#FFF; background:#639;}
        
a.btn.pink{background:#F4288D; color:#fff;}
a.btn.pink:hover{color:#FFF; background:#C36;}
        
a.btn.orange{background:#E9AB2B; color:#fff;}
a.btn.orange:hover{color:#FFF; background:#C60;}
        
/*fine bottone*/
                                
.copyright .right {
text-align: right;
width:25%;
float:right;
}
.copyright  a:link, .copyright a:visited {color: #24344B; text-decoration: underline; }
.copyright  a:active, .copyright a:hover {color: #24344B; text-decoration: underline; }
                                
/*---------fine copyright----------*/

</style>       

non adattare solo questo contenuto ma imposta tutto il template in dimensioni minori......e caricalo in una sottocartella.

... devi fare come ti è stato anticipato...

... se è un Modello Predefinito, basta che lo DUPLICHI, lo salvi e lo importi come Modello Personalizzato, e nella sezione per la modifica del modello gli assegni una larghezza per esempio di 480 Px, poi azione Ctrl+Anteprima, e controlla se il layout delle pagine è congruo, altrimenti apporterai le modifiche del caso; ...se invece fosse già un Modello Personalizzato, salva con nome diverso e parti dalla modifica del modello assegnando la larghezza come detto prima...

... in questo modo il sito mobile lo posizionerai in sotto directory, e nella pagina di benvenuto e/o nella Intestazione, metterai le scelte da selezionare per il sito normale e per il mobile, così il visitatore è libero di visualizzare a preferenza; ...altrimenti per fare in modo che si apra il sito dedicato alla piattaforma destinataria in automatico, dovrai documentarti sui metodi di redirect...

...se invece vuoi che il layout sia unico e che si adatti a tutte le risoluzioni, se sei più che esperto!!!, non converrebbe agire manipolando il codice del programma, per cui non servirebbe, ma converrebbe partire da zero e costruire il tutto sul Blocco Note di Windows, impiegando meno tempo, ma appunto devi essere in ogni caso più che esperto; ...in teoria!!!, un sito costruito con tabelle e div elastici in posizione relativa, potrebbe!!! assolvere allo scopo...

.

... io ti consiglierei il sito unico a 800-900 Px, ed in alternativa i DUE siti dedicati (640!-1280!) con scelta libera, ...ma tutto è relativo al tipo di Sito e di cosa si volesse ottenere...

.

ciao