How to make my div and its elements become reactive?

advertisements

I have a div that use as a PopUp to take pictures with the WebCam, was perfect on my monitor (1366x768), but, on smaller screens, the div is horrible

HTML:

<div id="light" class="white_content">
    <a id="close_ic" href = "javascript:void(0)" onclick ="closediv()" >x</a>
    <canvas id="canvas" width="500"height="375">  </canvas>
    <video autoplay id="videoElement"></video>
    <input type="button" value="Capturar Foto" id="save" class="cam_btn_canvas" />
</div>

CSS:

.white_content
{
    display: none;
    position: fixed;
    top: 15%;
    left: 17.5%;
    width: 65%;
    height: 62%;
    border-style: solid;
    border-width: 1px;
    border-color: #474747;
    background-color: white;
    z-index: 1002;
    overflow: auto;
    border-radius: 10px;
    min-height: 398px;
    min-width: 657px;
}
.cam_btn_canvas
{
    font-weight: bolder;
    left: 46%;
    top: 75%;
    position: inherit;
}
#videoElement {
    width: 32%;
    height: 48.5%;
    background-color: #666;
    z-index: 1102;
    left: 50%;
    top: 139px;
    position: inherit;
}
#canvas
{
    width: 32%;
    height: 48.5%;
    background-color: #666;
    z-index: 1102;
    left: 18%;
    top: 139px;
    position: inherit;
}
#close_id
{
    font-size: 15pt;
    font-weight: bolder;
    position: inherit;
    left: 80%;
    top: 106px;
}

I wanted to know how to make both my window and the elements inside keep the ratio even with a smaller screen

Thanks for attention!


Not answering your question directly but here are two fixes for your issue.

Media Query

A media query consists of a media type and at least one expression that limits the style sheets' scope by using media features, such as width, height, and color. Developers use these when making their site more responsive.

Here is an example of making my container responsive.

 @media (min-width: 768px) {
  .container {
    max-width: 730px;
  }
}

Bootstrap

Bootstrap is a framework designed for creating mobile first projects on the web. Since I have been using Bootstrap, I have never once looked back. You can easily make your site responsive by using preset classes with their markup and css. It makes it so you will never really have issues like the one you are experiencing now.

Check out Bootstrap or any other Front-End framework. They are great.