Biraz Yardımınıza ihtiyacım var...

elimde px değerlerle hazırladığım bir web sayfası bulunuyor ancak haliyle responsive değil... bunu nasıl çözebilirim? html css js konularında daha çok ama çok yeniyim...

<div class="body">
  <div class="left-body">
    <div class="button-list">
      <button id="header-button" class="button">
        <div class="button-icon-container">
          <img class="button-icon" src="logo.png" alt="">
        </div>
        <div class="button-text-container">
          <div class="button-text">SYNTHJOB</div>
        </div>
      </button>
    </div>
  </div>
  <div class="right-body">
    <div class="content-container">
      <iframe class="content" src="" frameborder="0"></iframe>
    </div>
  </div>
</div>

* {
    box-sizing: border-box;
}
html, body{
    padding: 0%;
    margin: 0%;
    border: 0px;
    background-color: green;
}
.body{
    /* [Yükseklik & Genişlik] */
    height: 1080px;
    width: 1920px;
    /* [Flexbox] */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    .left-body{
        /* [Yükseklik & Genişlik] */
        height: 1080px;
        width: 480px;
        /* [Flexbox] */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
        .button-list{
            /* [Yükseklik & Genişlik] */
            height: 100%;
            width: 480px;
        
            /* [Flexbox] */
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
        
            /* [Style] */
            background-color: black;
            padding: 0px;
            margin: 0px;
            border: 0px;
        
            .button{
                /* [Button Ayarları] */
                height: 108px;
                width: 480px;
        
                display: flex;
                flex-direction: row;
                justify-content: space-around;
                align-items: center;
        
                background-color: black;
                padding: 0px;
                margin: 0px;
                border: 0px;
        
                .button-icon-container{
                    /* [Button Icon Kapsayıcı Ayarları] */
                    height: 108px;
                    width: 108px;
        
                    display: flex;
                    flex-direction: row;
                    justify-content: space-around;
                    align-items: center;
        
                    padding: 0px;
                    margin: 0px;
                    border: 0px;
                    
                    .button-icon{
                        /* [Button Icon Ayarları] */
                        height: 72px;
                        width: 72px;
        
                        display: flex;
                        flex-direction: row;
                        justify-content: space-around;
                        align-items: center;
        
                        padding: 0px;
                        margin: 0px;
                        border: 0px;
                    }
                }
            
                .button-text-container{
                    /* [Button Text Container Ayarları] */
                    height: 108px;
                    width: 372px;
        
                    display: flex;
                    flex-direction: row;
                    justify-content: space-around;
                    align-items: center;
        
                    padding: 0px;
                    margin: 0px;
                    border: 0px;
                    
                    .button-text{
                        /* [Button Text Ayarları] */
                        height: 72px;
                        width: 366px;
        
                        max-height: 72px;
                        max-width: 366px;
        
                        display: flex;
                        flex-direction: column;
                        justify-content: space-around;
                        align-items: flow-start;
        
                        padding: 0px;
                        margin: 0px;
                        border: 0px;
        
                        font-size: 36px;
                        font-weight: bold;
                        color: white;
                        text-align: left;
                        overflow: hidden;
                        text-overflow: clip;
                        white-space: nowrap;
                    }
                }
            }
        }


    .right-body{
        /* [Yükseklik & Genişlik] */
        height: 1080px;
        width: 1440px;
        /* [Flexbox] */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .content-container{
            /* [Yükseklik & Genişlik] */
            height: 1080px;
            width: 1440px;
            /* [Flexbox] */
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            /* [Style] */
            background-color: white;
            padding: 0px;
            margin: 0px;
            border: 0px;
        }
    }
}
.button-list{
    /* [Yükseklik & Genişlik] */
    height: 100%;
    width: 480px;
    /* [Flexbox] */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    /* [Style] */
    background-color: black;
    padding: 0px;
    margin: 0px;
    border: 0px;
    .button{
        /* [Button Ayarları] */
        height: 108px;
        width: 480px;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        background-color: black;
        padding: 0px;
        margin: 0px;
        border: 0px;
        .button-icon-container{
            /* [Button Icon Kapsayıcı Ayarları] */
            height: 108px;
            width: 108px;
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            align-items: center;
            padding: 0px;
            margin: 0px;
            border: 0px;
            
            .button-icon{
                /* [Button Icon Ayarları] */
                height: 72px;
                width: 72px;
                display: flex;
                flex-direction: row;
                justify-content: space-around;
                align-items: center;
                padding: 0px;
                margin: 0px;
                border: 0px;
            }
        }
    
        .button-text-container{
            /* [Button Text Container Ayarları] */
            height: 108px;
            width: 372px;
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            align-items: center;
            padding: 0px;
            margin: 0px;
            border: 0px;
            
            .button-text{
                /* [Button Text Ayarları] */
                height: 72px;
                width: 366px;
                max-height: 72px;
                max-width: 366px;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                align-items: flow-start;
                padding: 0px;
                margin: 0px;
                border: 0px;
                font-size: 36px;
                font-weight: bold;
                color: white;
                text-align: left;
                overflow: hidden;
                text-overflow: clip;
                white-space: nowrap;
            }
        }
    }
}

böyle uğraşırsanız çok zor olur ve vaktiniz gider. işin içinden çıkamazsınız.
Bootstrap ile başlayın ve onunla devam edin. otomatik response.
1 haftada sökersiniz.

teşekkür ederim hocam...

Responsive mantığını anlamak için bu sayfadaki (media query) örnekleri inceleyebilirsiniz.