resize the popup for different windows

Question

I hope you can help me, what happens is that I made a popup, but the problem I have is the screen relationship since from the laptop it looks good, but from a computer it does not meet the screen relationship, I don't know where I can adjust to adapt to different screens, I hope you can help me, I detail the code and the css

 $(document).ready(function() { var id = '#dialog'; //Get the screen height and width var maskHeight = $(document).height(); var maskWidth = $(window).width(); //Set heigth and width to mask to fill up the whole screen $('#mask').css({'width':maskWidth,'height':maskHeight}); //transition effect $('#mask').fadeIn(500); $('#mask').fadeTo("slow",0.9); //Get the window height and width var winH = $(window).height(); var winW = $(window).width(); //Set the popup window to center $(id).css('top', winH/2-$(id).height()/2); $(id).css('left', winW/2-$(id).width()/2); //transition effect $(id).fadeIn(2000); //if close button is clicked $('.window.close').click(function (e) { //Cancel the link behavior e.preventDefault(); $('#mask').hide(); $('.window').hide(); }); //if mask is clicked $('#mask').click(function () { $(this).hide(); $('.window').hide(); }); });

 #mask { position:absolute; left:0; top:0; z-index:9000; background-color:#26262c; display:none; } #boxes.window { position:absolute; left:0; top:0; width:440px; height:850px; display:none; z-index:9999; padding:20px; border-radius: 5px; text-align: center; } #boxes #dialog { width:470px; height:auto; padding: 10px 10px 10px 10px; background-color:#ffffff; font-size: 15pt; }.agree:hover{ background-color: #D1D1D1; }.popupoption:hover{ background-color:#D1D1D1; color: green; }.popupoption2:hover{ color: red; }

 <:-- PopUp Automatic --> <div id="boxes"> <div style="top; 50%: left; 50%: display; none." id="dialog" class="window"> <div id="san"> <a href="#" class="close agree"><img src="landing/images/close:png" width="25" style="float;right: margin-right; -6px: margin-top; -44px."></a> <img src="landing/images/popup_2022.jpg" width="450"> <!-- <img src="landing/images/comunicado.jpg" width="450"> --> </div> </div>

Answer 1

You can use viewport units and max/min properties:

#boxes .window {
  position:absolute;
  left:0;
  top:0;
  width: 20vw;
  height: 20vh;
  max-width:440px;
  max-height:850px;
}