Come far diventare mobile responsive il template di un sito web

Ciao a tutti... non so se questa è l'area giusta per il problema che esporrò tra poco, però ve lo voglio esporre lo stesso. Sto lavorando ad un sito ed ho quasi finito. L'unica cosa che mi manca è di farlo diventare responsive.

Premetto che non sono un esperto, ne un programmatore, quindi ho bisogno di spiegazioni chiare munite di codice preciso. Ho già fatto vari tentativi per rendere il sito responsive ma testandolo con i vari strumenti che il web mette a disposizione, finora non sono riuscito a rendere il sito correttamente visibile anche da mobile.

Se fosse possibile vorrei una mano in proposito da chi volesse cimentarsi per rendere questo template mobile-friendly. Nel codice del template ho già messo la riga del <meta name="viewport" e poi ho già inserito anche line-height:1.8em;

Il codice css del template è questo:

Codice:

---

<style type="text/css">
html,body{margin:0;padding:0;}
body{margin:0; padding:0;background: #e2e2e0; color: #666;font: 16px/28px;color: #000;font-family: 'Open Sans', sans-serif; line-height:1.8em;}
h1,h2{font-family:oswald;text-transform:uppercase;font-weight:normal;}
a{color:#21aabd;text-decoration:none;}
a:hover{color:#333;text-decoration:underline;}


        #container                {width: 1240px;margin: 0 auto;background:#fff}
               
                /*** Header ***/
                #header                        {width:1200px;padding:20px;background:#21aabd;}
                        #header h1        {color:#fff;}
                       
                /*** Nav ***/       
                #nav {
    background: #666 !important;
    width: 100%;
    color: #FFF;
        margin: 0px;
        padding: 0;
        position: relative;
        border-top:0px solid #a70100;
        height:35px;
}
#nav {
    margin: 0;
    padding: 0;
}
#nav ul {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
}
#nav li {
    list-style: none;
    margin: 0;
    padding: 0;
        border-left:0px solid #444;
        border-right:0px solid #444;
        height:35px;
}
#nav li a, #nav li a:link, #nav li a:visited {
    color: #FFF;
    display: block;
    font:normal 12px Trebuchet, sans-serif;    margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
}
#nav li a:hover, #nav li a:active {
    background: #f20100;
    color: #FFF;
    display: block;
    text-decoration: none;
    margin: 0;
    padding: 9px 12px 10px 12px;
}
#nav li {
    float: left;
    padding: 0;
}
#nav li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 140px;
    margin: 0;
    padding: 0;
}
#nav li ul a {
    width: 140px;
}
#nav li ul ul {
    margin: -25px 0 0 161px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
    left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
    left: auto;
}
#nav li:hover, #nav li.sfhover {
    position: static;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
    background: #ff3837;
    width: 140px;
    color: #FFF;
    display: block;
    font:normal 12px Trebuchet, sans-serif;
    margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
z-index:9999;
border-bottom:1px dotted #444;
}
#nav li li a:hover, #nav li li a:active {
    background: #473b3b;
    color: #FFF;
    display: block;    margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
}
               
                /*** Slider ***/       
                .slider-wrapper        {width:100%;}
               
                /*** Contenuto evi ***/
                .item-evi                {width:280px;padding:20px;float:left;}
               
                /*** Messaggio ***/
                #mes-full                {width:920;padding:20px;clear:both;background: #e2e2e0;}       
                        #mes-full p {font-family:oswald;text-transform:uppercase;font-weight:normal;font-size: 28px;}                               
               
                /*** Contenuto ***/
                #content                {width:820px;padding:20px;float:left;}
                        #content .articolo        {border-bottom:1px solid #eee;min-height:190px;padding:0px 0 10px 0;}
                        #content .articolo img{float:left;margin: 0 20px 0 0;}
                       
                        #content .last                {border-bottom:none;}

                /*** Sidebar ***/
                #sidebar                {width:260px;padding:20px;float:right;}
       
                /*** Footer ***/
                #footer                        {width:1200px;padding:20px;clear:both;background: #666;color:#fff}
               
               
/* Clear */
.clear{width:100%;clear:both;height:1px;background:#eee;}

</style>

---

Mentre il codice html è questo:

Codice HTML:

---

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>PennadiGianca</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="css/nivo-slider.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="css/default.css" type="text/css" media="screen" />
<meta name="HandheldFriendly" content="true" />
  <meta name="format-detection" content="telephone=no" />
  <meta name="viewport" content="width=device-width, user-scalable=0, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
        <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
 
  <script type="text/javascript" src="js/jquery.nivo.slider.js"></script>
   
        <script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider();
    });
    </script>
   
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,400italic,700' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="container">
<div id="header"><img src="http://podset.altervista.org/provagenerale/iconsocial/youtube_14198.png" alt="" width="40" height="40" align="right" /><img src="http://podset.altervista.org/provagenerale/iconsocial/google-plus66095.png" alt="" width="40" height="40" align="right" /><img src="http://podset.altervista.org/provagenerale/iconsocial/facebook59205.png" alt="" width="40" height="40" align="right" />
<h1 style="text-align: left;"><img src="http://podset.altervista.org/images/logositoprova.png" alt="" width="250" height="246" />TITOLO HEADER</h1>
</div>
<div id="nav">
<ul>
<li><a href="#">HOME PAGE<br /></a></li>
<li><a href="#">CONTATTAMI<br /></a></li>
<li><a href="#">CHI SONO<br /></a>
<ul>
<li><a href="#">SOTTOSEZIONE 1</a></li>
<li><a href="#">SOTTOSEZIONE 2</a></li>
</ul>
</li>
<li><a href="#">SEZIONE 1<br /></a>
<ul>
<li><a href="#">SOTTOSEZIONE 1</a></li>
<li><a href="#">SOTTOSEZIONE 2</a></li>
</ul>
</li>
<li><a href="#">SEZIONE 2<br /></a></li>
<li><a href="#">SEZIONE 3<br /></a>
<ul>
<li><a href="#">SOTTOSEZIONE 1</a></li>
<li><a href="#">SOTTOSEZIONE 2</a></li>
<li><a href="#">GDPR</a></li>
</ul>
</li>
</ul>
</div>
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider"><img src="img/times-square-traffic.jpg" alt="" /> <a href="http://www.miosito.com"><img title="This is an example of a caption" src="img/times-square-people.jpg" alt="" /></a> <img src="img/times-square-horse.jpg" alt="" /></div>
</div>
<div id="content">
<div class="articolo"><img src="img/times-square.jpg" alt="" />
<h2>tITOLO CONTENUTO</h2>
<!--?php session_start(); ?--> <!--?php include('iscrizione.php');?-->
<div id="le_body_row_3_col_1_el_4" class="element-container cf" data-style="">
<div class="element">
<div style="width: 640px; height: 0; padding-bottom: 56.25%; padding-top: 0;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean fermentum ipsum eu sapien. Mauris pretium, elit sed scelerisque blandit, mauris diam fermentum nisl, quis vulputate odio quam id lacus. Vestibulum tellus. Suspendisse dictum elementum nisi. Quisque placerat varius nisl. Maecenas laoreet nibh sed nisi. In quis eros. Donec erat.</div>
</div>
</div>
</div>
</div>
<div class="articolo last"><img src="img/times-square.jpg" alt="" />
<h2>Download</h2>
<p><img src="http://testiefficaci.altervista.org/images/iconapdf.PNG" alt="" width="75" height="104" /></p>
<p><a href="http://www.miosito.com">Titolo form</a></p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean fermentum ipsum eu sapien.</p>
<p><img src="http://testiefficaci.altervista.org/images/arrow-red-13.png" alt="" width="69" height="68" /></p>
</div>
<div id="sidebar">
<h2>Sidebar</h2>
<ul>
<li><a href="http://testiefficaci.altervista.org">Titolo 1<img src="http://testiefficaci.altervista.org/images/iconavideo.JPG" alt="" width="105" height="108" /></a></li>
<li><a href="http://testiefficaci.altervista.org">Titolo 2<img src="http://testiefficaci.altervista.org/images/iconavideo.JPG" alt="" width="105" height="108" /></a></li>
<li>Titolo 3<img src="http://testiefficaci.altervista.org/images/iconavideo.JPG" alt="" width="105" height="108" /></li>
<li>Titolo 4<img src="http://testiefficaci.altervista.org/images/iconavideo.JPG" alt="" width="105" height="108" /></li>
</ul>
</div>
<div class="clear">&nbsp;</div>
<div class="item-evi">
<h2><a href="http://testiefficaci.altervista.org/">sezione 1</a></h2>
<p>&nbsp;</p>
</div>
<div class="item-evi">
<h2><a href="http://testiefficaci.altervista.org/">sezione 2</a></h2>
<p>&nbsp;</p>
</div>
<div class="item-evi">
<h2><a href="http://testiefficaci.altervista.org/">Sezione 3</a></h2>
<p>&nbsp;</p>
</div>
<div id="footer"><img src="http://podset.altervista.org/provagenerale/iconsocial/fc.png" alt="" width="50" height="46" align="right" /><img src="http://podset.altervista.org/provagenerale/iconsocial/gp.png" alt="" width="50" height="46" align="right" /><img src="http://podset.altervista.org/provagenerale/iconsocial/you.png" alt="" width="50" height="47" align="right" />
<p>Copyright (c) - Tutti i diritti sono riservati - privacy policy</p>
</div>
</div>
</body>
</html>

---

Per rendere responsive un sito, potresti usare le media queries (vedi sul web, ci sono tanti esempi).

Non ho analizzato in particolare il tuo template, però se lo hai fatto tu saprai modificare le regole CSS per renderlo responsive al variare della dimensione dello schermo.

Ciao!

Il sito non l'ho fatto io quindi puoi capire che non so come modificare le regole css. Per quanto riguarda i media query li ho già inseriti e visti diverse volte nella mia ricerca (quella che faccio sempre prima di intavolare una discussione per trovare una risposta) e non ci ho capito molto, altrimenti non mi sarei rivolto al forum.

Capisco che ci sono altre discussioni nel forum ma vorrei avere una risposta un po' più dettagliata relativa al mio caso, altrimenti è inutile che mi rivolga al forum stesso.

C'è nessuno che sa come mettere le mani nel codice che ho inserito sopra? Grazie...

Ho dato un'occhiata al layout e mi sembra fatto male, soprattutto non adatto per essere responsive (come la scritta download).

Ho dedicato 5 minuti e potresti spostare a fondo della pagina gli elementi che non si visualizzano sotto i 1240px, con:

Codice:

---

@media only screen and (max-width: 1240px) {
p{
  padding:10px;
  clear:both;
}
#sidebar{
 padding:10px;
  clear:both;
  float:left;
}
}

---

Ma tenendo presente che il template andrebbe aggiustato completamente per essere responsive e che non lo conosci e quindi anche per ulteriori modifiche non sapresti dove mettere mani, ti consiglierei di passare o ad un template già responsive, o meglio ad un CMS come WordPress.

Il forum è fatto per piccoli consigli, non è possibile metter mani ad un template del genere che andrebbe riscritto quasi da zero: in tal caso non sarebbe nemmeno corretto nei confronti di chi fa queste cose per lavoro.

Ciao!

Ho scaricato un altro template con grafica simile al template in questione e ora vado a provarlo per vedere come funziona. Grazie comunque per il suggerimento!