.wrapper {
    position: relative;
    width: 400px;
    height: 200px;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


@media only screen and (min-width: 600px) {
    .signature-pad {
        position: absolute;
        left: 0;
        top: 0;
        width:470px;
        height:200px;
        background-color: white;
    }
}

@media only screen and (max-width: 600px) and (min-width: 400px) {
    .signature-pad {
        position: absolute;
        left: 0;
        top: 0;
        width:370px;
        height:200px;
        background-color: white;
    }
}

@media only screen and (max-width: 400px) and (min-width: 320px) {
    .signature-pad {
        position: absolute;
        left: 0;
        top: 0;
        width:330px;
        height:200px;
        background-color: white;
    }
}

@media only screen and (max-width: 320px) {
    .signature-pad {
        position: absolute;
        left: 0;
        top: 0;
        width:280px;
        height:200px;
        background-color: white;
    }
}