Responsive Bootstrap

Ciao zorrino,

allora per rendere responsive il tuo sito dovresti intanto aggiungere il metatag viewport e includere Bootstrap

[HTML]
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- riga aggiunta -->
    <script src="jquery-latest.js"></script>
    <script src="foglio.js"></script>
    <link href="css.css" rel="stylesheet" type="text/css">
    <!-- Bootstrap -->
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <title></title>
</html>
[/HTML]

Successivamente aggiungi la classe container al tuo contenitore principale

[HTML]
<body>
    <div id="pagina" class="container"> <!-- aggiunta classe container -->
    ....
[/HTML]

In questo modo, facendo il resize sul browser, noterai che il contenitore principale si adatta alla larghezza dello schermo, in base alle media-query.

Per farti capire come funzionano, ti posto un semplice un esempio

[CODE]
<style>
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    body {
        background:#FF0;
    }
}
@media (max-width: 1200px) {
    body {
        background:#F00;
    }
}
</style>
[/CODE]

Se metti questo stile nel codice del tuo sito, noterai che lo sfondo del body è giallo per risoluzioni dello schermo maggiori di 1200px. Se fai il resize portando la larghezza a 1200px o meno (es. 1199px), vedrai che lo sfondo passerà da giallo (#FF0) a rosso (#F00).

Ora se applichi lo stesso discorso alle larghezze dei contenitori, vedrai che al diminuire della risoluzione, la larghezza varia adattandosi al dispositivo (tablet, pc, smartphone, etc...).

Comunque se dai un occhio alla documentazione, con un pò di pazienza riesci ad applicare quelle poche classi che ti servono per rendere responsive il tuo sito.

Un consiglio: non dare un'altezza fissa ai contenitori, a meno che non vuoi allinearli uno accanto all'altro. E evita l'uso di immagini per i testi (ad es. nel sito noto le le intestazioni dei paragrafi sono in realtà immagini).