Putin ajutor transformare tema in responsive design

Salutare.
Am o tema pe care vreau sa o fac responsive design.
Am pus un media qeueri @media screen and (max-width: 420px) in care am adaugat ceea ce nu se incadra.
Problma pe care o intampin este ca pagina mea are un width de 988px. Eu as vrea ca atunci cand se intra dupa un device cu un width mai mic decat aceasta dimensiune, id content si id sidebar sa se micsoreze pana la rezolutia cu un width de 768px, apoi sidebar right sa treaca sub content. Nu stiu ce meta queri sa adaug si cum sa fac procentele acelea. Mentionez ca sidebar are 305px, iar content 600px.

Daca sidebar si sidebar right sunt acelasi lucru, ceva de genul:

Cod:

---

@media only screen and (min-width:768px) and (max-width:987px){
    #content{
        min-width:466px;
        width:61%;
    }
    #sidebar{
        min-width:237px;
        width:31%;
    }
}
@media only screen and (max-width:767px){
    #content, #sidebar{
        min-width: 0;
        width: auto;
    }
    #sidebar{
        display:block;
        float:none;
    }
}

---

Da, sidebar este acelasi lucru cu sidebar right. Am pus cum mi-ai dat tu dar observ ca la primul queri ramane la fel, nu se micsoreaza #content

incearca:

Cod:

---

    #content{
        min-width:466px !important;
        width:61% !important;
    }

---

sau vezi in fisierul css pentru #content daca are la width !important si sterge-l

setarile pentru content pot fi gresite - content e intr-un alt div? trebuie micsorat si asta

Am rezolvat.

Pentru desktop in loc de width: 988px am pus max-width: 988px;

Iar pe responsive:

@media only screen and (max-width:768px) {
#content {
width: 100%;
float: none;
}

}