Help with responsive design

Hi, I want to get signature from phones and I tough about rotating the jsignature when the screen is too small. It seems to work when we draw the signature "horizontal", but "vertical" the "drawing area" stays where the "horizontal" zone was... But it draws in the "vertical" where is it supposed to be.

Well, here is what I have done, can someone check to help me with the problem when signing "vertical".

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
html {
    font-family: "Lucida Sans", sans-serif;
}

#SignatureParent {
  color:darkblue;
  background-color:white;
  padding: 15px;
}

#Signature {
  padding: 0 0 0 0; 
  margin: 0 0 0 0;
  border: 1px dotted #000;
  width: 100%;
}

.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}

.modal-content {
    background-color: #fefefe;
    margin: 0;
    position: fixed;
    border: 1px solid #888;
    width: 550px;
    top: 50%;
    left: 50%;

    transform-origin: center center 0;
    -webkit-transform-origin: center center 0;

    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);

    animation-name: animatetop;
    animation-duration: 2s;
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 2s;
}

@media only screen and (max-width: 551px) {
    .modal-content {
    background-color: #fefefe;
    margin: 0;
    position: fixed;
    border: 1px solid #888;
    width: 550px;
    top: 50%;
    left: 50%;

    transform-origin: center center 0;
    -webkit-transform-origin: center center 0;

    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%) rotate(90deg);

    animation-name: animatetop;
    animation-duration: 2s;
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 2s;
    }
}

@-webkit-keyframes animatetop {

    from {top:-300px; opacity:0} 
    to {top:50%; opacity:1}
}

@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:50%; opacity:1}
}

.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.modal-header {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
}

.modal-body {
    padding: 2px 16px;
    height: 150px;
}

.modal-footer {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
}

</style>
<title>Signature - Rotated and Slide</title>

<script src="libs/jquery.js"></script>
<script src="src/jSignature.js"></script>
<script src="src/plugins/jSignature.CompressorBase30.js"></script>
<script src="src/plugins/jSignature.CompressorSVG.js"></script>
<script src="src/plugins/jSignature.UndoButton.js"></script> 
<script src="src/plugins/signhere/jSignature.SignHere.js"></script> 
<script>
$(document).ready(function() {
    var $sigdiv1 = $("#Signature").jSignature({'UndoButton':false, 'width': '500', 'height': '100'})
})
</script>
</head>
<body>

<input type="button" value="Get signature" onClick="ShowSign()">

<div id="myModal" class="modal">
    <!-- Modal content -->
    <div class="modal-content">
    <div class="modal-header">
      <span class="close">&times;</span>
      <p>Sign here :</p>
    </div>
    <div class="modal-body">

        <div id="Signatures" class="Signatures">
            <div id="SignatureParent">
            <div id="Signature"></div>
            <div id="scrollgrabber"></div>
            </div>
        </div>

    </div>
    <div class="modal-footer">
        <button type="button" onClick="$('#Signature').jSignature('clear')">Erase</button>
    </div>
    </div>
</div>

<script>
    var modal = document.getElementById('myModal');
    var btn = document.getElementById("myBtn");
    var span = document.getElementsByClassName("close")[0];

    span.onclick = function() {
        modal.style.display = "none";
    }

    window.onclick = function(event) {
        if (event.target == modal) {
            modal.style.display = "none";
        }
    }

    function ShowSign() {
        modal.style.display = "block";
    }

</script>

</body>
</html>

brinley / jSignature

Help with responsive design #127