Non responsivo

[Piermy]

Ciao a tutti,
alla luce di quanto ho letto qua:
https://developers.google.com/web/fu...xt_for_reading

il mio sito www.libriantichicavallero non è responsivo.

Mi sareste una mano per renderlo tale ?
In particolare mi riferisco ad es alla pagina:
www.libriantichicavallero/1.htm
oppure
https://www.libriantichicavallero.com/view.php?N=1

posto il file style.css:

body
{
font-family: trebuchet ms, verdana, arial, tahoma;
font-size: 80%; color: black;
background-color: #ffffff;
line-height: 200%;
margin-top: 0px;
background: #ffffff url('images/bg.gif') top center repeat-x;
}


#border
{
border: 0px ;
width: 800px;
background-color: #FFFFFF;
background:url('images/backround2.gif') no-repeat;
margin: 0 auto;
}


#header_ita
{
height: 190px;
border-bottom: 1px solid #669900;
background-image:url('images/header_ita.jpg');
}


#header_eng
{
height: 190px;
border-bottom: 1px solid #669900;
background-image:url('images/header_eng.jpg');
}


#content
{
padding: 0.5em 1em;
max-width: 740px;
background-color: #FFFFFF;
}


#container
{
width: 770px;
margin: 0px auto;
background-color: #ffffff;
border: 0px solid #669900;
}


.splitright {
background: #ffffff url('images/menu.gif') top center no-repeat;
width: 30%;
float: right;
overflow: hidden;
text-align: center;
}


.splitleft {
background: #ffffff;
margin:auto;
width: 68%;
float: left;
overflow: hidden;
text-align: justify;
}


#introduction{
float:right;
width:180px;
padding:0px 0px;
margin:20px 0 20px 20px;
background: url(images/menu.gif) no-repeat;
text-align:center;
line-height:1.5em;
color:green;
font-size:1.0em;
font-family:"Lucida Grande","Lucida Sans Unicode",arial,sans-serif;
letter-spacing:0px;
}


#introduction ul, #introduction li {
text-align:center;
list-style: none;
margin: 0;
padding: 0;
}


#introduction a {border-bottom: none; color:black;}


#introduction h3{
text-align: center;
position:static;
}


#introduction a:link {color:green; text-decoration: none;}

#introduction a:hover {color:sienna; text-decoration: none;}


#introduction a:visited {color:red; text-decoration: none;}


#introduction a:active {color:red; text-decoration: none;}






/* ~~~~~~~~~ footer ~~~~~~~~~ */
#footer
{
text-align: center;
height: 30px;
background-color: #F5FAF5;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #CCCCCC;
margin-top: 50px;
margin-right: 15px;
margin-bottom: 0;
margin-left: 15px;
padding-top: 0;
padding-right: 20px;
padding-bottom: 0;
padding-left: 20px;
clear: both;

}






#footer a:link {color:#808080; text-decoration: none;}

#footer a:hover {color:sienna; text-decoration: none;}


#footer a:visited {color:black; text-decoration: none;}










a:link {color:green; text-decoration: none;}

a:hover {color:sienna; text-decoration: none;}


a:visited {color:red; text-decoration: none;}


a:active {color:red; text-decoration: none;}




/* ~~~~~~~~~ PROPS FOR THE MENU GO OUT TO EXPLODING-BOY.COM ~~~~~~~~~ */


#topmenu {
position: relative;
top: 13px;
left: 15px;
width: 730px;
font-size:93%;
margin: 0;
line-height:normal;
height: 41px;
}
#topmenu ul {
margin:0;
padding:0px 0px 0 2px;
list-style:none;
}
#topmenu li {
display:inline;
margin:0;
padding:0;
}
#topmenu a {
float:left;
background:url(images/menuleft.gif) no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#topmenu a span {float:left;
display:block;
background:url(images/menuright.gif) no-repeat right top;
padding:5px 15px 4px 6px;
color:green;
}























#topmenubandiere {
position: absolute;
top: 20px;
left: 830px;
width: 100px;
font-size:93%;
margin: 0;
line-height:normal;
height: 41px;
}
#topmenubandiere ul {
margin:0;
padding:0px 0px 0 2px;
list-style:none;
}
#topmenubandiere li {
display:inline;
margin:0;
padding:0;
}

















/* Commented Backslash Hack hides rule from IE5-Mac \*/
#topmenu a span {float:none;}
/* End IE5-Mac hack */
#topmenu a:hover span {color:sienna;}








#topmenu a:visited span {color:red;}








#topmenu a:hover {
background-position:0% -42px;
}
#topmenu a:hover span {
background-position:100% -42px;
}
/* ~~~~~~~~~ Headings ~~~~~~~~~ */
h1
{
font-size: 120%;
color: #659500;
}


h3{
color:green;
font-family:geneva,arial,sans-serif;
font-weight:normal;
text-transform:uppercase;
word-spacing:4px;
letter-spacing:3px;
font-size:0.8em;
font-weight:bold;
padding:0 2px;
margin:0;
}


/*~~~~~~~~~~~styles~~~~~~~~~~~~~~~*/


.style4 {font-size: 18px}
.style5 {
font-size: 12px;
color: #CCCCCC;

Grazie

[KillerWorm]

[MOD]
Ciao, il restyling di un sito (o di qualche pagina) per renderne il layout responsive è un'operazione abbastanza complessa; se stai cercando qualche consiglio generale puoi iniziare dall'articolo che hai citato tu stesso o consultare qualche altra guida (vedi tra i link utili CSS al capitolo 3), ma dubito tu possa trovare qualcuno che si adoperi per farti il lavoro aggratis. Se stai offrendo lavoro/collaborazione ti consiglio di aprire una nuova discussione nell'apposita sezione del forum "Offro lavoro/collaborazione".

Ad ogni modo qui chiudo; non sei nuovo del forum ma ti invito a (ri)leggere il regolamento di sezione per l'uso dei tag [CODE][/CODE] quando posti del codice sul forum, e di titoli maggiormente esplicativi (quello che hai usato è piuttosto generico).

Grazie per l'attenzione, buon proseguimento.