@media screen and (max-width: 750px) {
    .controlar-div {
        width: 100%;
        height: 30vh;
        bottom: 0;
        left: 0;
        top: auto;
        margin-top: 0;
        border-radius: 10px 10px 0px 0px;
    }
    .nav-link{
        display: flex;
        flex-wrap: wrap;
    }
    #metaMenu{
        display: none;
    }
    .head-div h1 {
        font-size: 1.5rem;
    }
    
    .connect {

       font-size: 10px;
    }
    .nav-link{
        font-size: .8rem;
    }
    .code-container{
        flex-direction: column;
        height: 100%;
        width: 100%;
    }
    .editor{
        width: 100%;
        height: 40vh;
        border-right: none;
        
    }
    .output-frame{
        width: 100%;
        height: 50vh;
    }
    #cssList{
        
        margin-left: 0px;
      
    }
    label,input[type="range"], input[type="range"]::-webkit-slider-runnable-track,select,input[type='text'],.three-col,#customText,#cssCode,#generateCssButton{
        width: 65%; 
      }
      .showsavedata{
        width: 100%;
    }

    #shoecolornow{
        display: none;
    }
}