snippet responsive che respondive non è @_@

[noblex]

Ciao a tutti, sto creando il mio primo sito web e sto avendo un problema con uno snippet che, pur utilizzando le classi di Bootstrap (quindi in teoria responsive) non viene correttamente visualizzato su pc a risoluzione diversa da 1920x1080. Ho utilizzato quache funzione di CSS (che verrà poi implementata nel file style.css) direttamente nell'html per questioni di semplicità mentre buttavo giù la bozza, ma dovrebbe essere tutto relativo alla risoluzione dello schermo per cui sono un po' confuso.

I problemi sono i classici dei contenuti non responsive: elementi che si sovrappongono, testi che escono dai bordini, e cose del genere.


Sapreste aiutarmi a sistemarlo? Non vi chiedo di mettervi li e correggermi 300 righe di codice eh! Basta che mi indiriziate su dove devo andare a guardare!

Grazie!!

Visualizzazione corretta:
(il quadrante in alto a destra è in hover e di conseguenza leggermente zoomato)




Codice (ho provato a usare un editor online ma non si vede niente.. viene tutto bianco):
http://pastebin.com/mEbLB8bx


I problemi probabilmente stanno tutti in queste poche righe

<div class="row content" >
              <div class="carousel-content col-md-3 col-sm-12" style=" margin-left:0px;">
                    <div class="img" style="position: absolute; width: 100; margin-left:0px;">
                         <!--RETTANGOLO GRIGIO A SINISTRA-->
                        <img src="/website/image/ir.attachment/223_04b91b8/datas"/>
                         <!--TESTO CENTRALE-->
                        <p style="position: absolute; top: 25%; font-size: 90%; margin-left: 15%; margin-right:15%; width: auto; text-align: center;">blablabla</p>
                        <a data-toggle="modal" class="btn; " data-target="#project-1" style="position: absolute; top: 75%; margin-left: 25%;">
                         <!--RETTANGOLO CON CONTORNO BIANCO IN BASSO E LINK-->
                                <img src="/website/image/ir.attachment/225_de08a2b/datas"  class="width:100%; height:auto; display: block;" alt="">
                                    <p style="position: absolute; top: 30%;  margin-left: 17%; ">Scopri i nosri prodotti</p>  
                                </img>
                        </a>
                    </div>
              </div>
              <div class="carousel-img col-md-8 hidden-sm hidden-xs" style="margin-left:34.3%; ">
                         <!--PARTE DESTRA-->
                <section class="s_image_gallery">
                  <div class="container" style="margin-left:0% margin-right:0%; width:100%;">
                    <div class="row">
                    
                        <table>
                          <tr>
                              <td>      
                                    
                              
                                    <a data-toggle="modal" class="btn;" data-target="#project-1">
                         <!--IMMAGINE 1 DI 6-->
                                        <img src="/website/image/ir.attachment/224_62960a8/datas" class="grow"  alt="" />
                                    </a>
                                
...
...
                        
                                 
                              </td>  
<td>

...
...

 </td>

Il primo div (quello con il blablabla si riferisce al box grigio a sinistra che occupa un 33% circa dello schermo), la table invece è la tabella con le 6 immaginone a destra.