Cacher is the code snippet organizer for pro developers

/* Fixes for OOPC to be responsive 
IMPORTANT! make sure there is not a set width on the OOPC "container" */
@media (max-width: 979px) {
    #opc_left {
        width: 405px;
        margin:0 auto;
        display: block;
    }
        #opc_left div#customer-fields.opc-section {
            width: 475px;
            margin-bottom: 10px;
        }
    #opc_right {
        display: block;
        width: 405px;
        margin:0 auto;
    }
}
@media (max-width: 767px) {
    #opc_left,
    #opc_right,
    #opc_left div#customer-fields.opc-section,
    #opc-form #basket-contents,
    #opc-form #shipping,
    .opc-section,
    #opc-form #payment {
        width: 100%;
    }
    #opc-form label, #opc-form #payment-fields label {
        text-align: left;
        display: block;
        width: 100%;
        float: none;
    }
    #opc-form select,
    div#shipping.opc-section select {
        width: 93%;
    }
    div#payment-fields select {
        width: 40%;
    }
    #opc-form .textfield, #opc-form #payment input[type="text"] {
        width: 90%;
    }
        #OOPC .tablescroll_head,
        #OOPC .tablescroll_wrapper,
        #OOPC #basket-content-table,
        #OOPC .tablescroll_foot {
            width: 100% !important;
            overflow: inherit !important;
            height: 100% !important;
            
        }
        #OOPC .tablescroll .item-name {
            width: 45% !important;
        }
        #OOPC .tablescroll .item-quantity,
        #OOPC .tablescroll .item-price,
        #OOPC .tablescroll .item-total {
            width:15% !important;
        }
        #OOPC #opc-form #basket-contents .item-image {
            max-width: 24%;
            margin: 0 1% 0 0;
        }
}