I am new to CSS and currently working on customizing a modal window. My main issue lies with its positioning, especially when the browser resolution changes, causing a misalignment as seen in the screenshot. I would like to specify the width and height dimensions in percentages.
Modal HTML:
<div class="modal fade" id="erroAdocaoAindaNaoConcluida" tabindex="-1" role="dialog" aria-labelledby="erroAdocaoAindaNaoConcluidaLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header" align="center">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<span class="titulo_modal" id="erroAdocaoAindaNaoConcluidaLabel">Error Detected</span>
</div>
<div class="modal-body" align="center">
<p class="titulo_form"> You can only adopt one animal at a time.</p>
</div>
<div class="modal-footer">
<button type="button" class="tamanho_btn_adotar btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
modal-content CSS:
.modal-content{
position:relative;width:45%;
background-color:#fff;
-webkit-background-clip:padding-box;
background-clip:padding-box;
border:1px solid #999;
border:1px solid rgba(0,0,0,.2);
border-radius:6px;
outline:0;
-webkit-box-shadow:0 3px 9px rgba(0,0,0,.5);
box-shadow:0 3px 9px rgba(0,0,0,.5)
}
.modal-content{
-webkit-box-shadow:0 5px 15px rgba(0,0,0,.5);
box-shadow:0 5px 15px rgba(0,0,0,.5)
}
modal-body CSS:
.modal-body{position:relative;padding:15px}
modal-dialog CSS:
.modal-dialog{width:600px;margin:30px auto}
.modal-dialog{
-webkit-transform:translate(0,0);
-ms-transform:translate(0,0);
-o-transform:translate(0,0);
transform:translate(0,0)
}
.modal-dialog{
position:relative;
width:auto;
top:20px;
left:8%;
margin:10px
}