How to solve: when the modal window is opened but when I zoom in or out (crtl + -) I get the content towards height. I want to do it in the content that is fixed in the same place and without moving the screen. I have included the boostrap in the main file. I'm just interested in centering and adjusting the screen without leaving this.
can it be in the content it focuses well or other type of content of "wrapper"?
Codes:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=500, initial-scale=1, maximum-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>estructura administrativa IGM</title>
<link rel="stylesheet" href="estructura_administrativa/css/estilos.css" type="text/css" media="screen" />
<link rel="stylesheet" href="estructura_administrativa/css/component.css" type="text/css" media="screen" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<style type="text/css">
body {
background-color:#0e83cd;
text-align:center;
margin-top:650px;
font-family: 'Roboto', sans-serif;
}
.hrmedio {
background-color: white;
height: 3px;
width:977px;
margin-top:-150px;
margin-left:240px;
position: absolute
}
.hrvertical1 {
background-color: white;
height:373px;
width:3px;
margin-top:-520px;
margin-left:710px;
position: absolute
}
.hrvertical2 {
background-color: white;
height:90px;
width:3px;
margin-top:-150px;
margin-left:240px;
position: absolute
}
.hrvertical3 {
background-color: white;
height:90px;
width:3px;
margin-top:-150px;
margin-left:555px;
position: absolute
}
.hrvertical4 {
background-color: white;
height:90px;
width:3px;
margin-top:-150px;
margin-left:885px;
position: absolute
}
.hrvertical5 {
background-color: white;
height:90px;
width:3px;
margin-top:-150px;
margin-left:1215px;
position: absolute
}
.titulo {
text-transform: uppercase;
letter-spacing: 1px;
font-size:20px;
}
.texto {
font-size: 17px;
text-align: justify;
text-shadow: 1px 2px 5px #575757;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$('.tooltips').tooltip({
trigger: 'focus'
})
});
</script>
</head>
<body>
<div>
<div class="hrmedio"></div>
<div class="hrvertical1"></div>
<div class="hrvertical2"></div>
<div class="hrvertical3"></div>
<div class="hrvertical4"></div>
<div class="hrvertical5"></div>
</div>
<div class="direccion">
<a class="btn btn-1 btn-1a css-tooltip-left color-naranja"><div class="titulo">DIRECCIÓN</div>
<span>
<p>DIRECCIÓN (DIR)</p>
<div class="texto">La Dirección actúa en nombre y en representación del Comandante del Comando De Industria Militar e Ingeniería. (CIMI)
<br><br>Tiene la facultad para celebrar los actos y contratos que se requieren para el desarrollo de los propios fines del IGM. Se rige bajo el decreto
con fuerza de ley 2.090 y las leyes 15.284 y 16.771.<br>
</div>
</span>
</a>
</div>
<div class="subdirecciongeneral">
<a class="btn btn-1 btn-1a css-tooltip-right color-naranja"><div class="titulo">SUBDIRECCIÓN</br>GENERAL</div>
<span>
<p>SUBDIRECCIÓN GENERAL (SDG)</p>
<div class="texto">La Subdirección General, dirige, planifica, controla y evalúa las actividades de todas las Subdirecciones, Unidad de Cuartel y Funciones primarias, con la finalidad de lograr cumplir los objetivos del IGM.</div>
</span>
</a>
</div>
<div class="subdirecciongeografica">
<a class="btn btn-1 btn-1a css-tooltip-top color-naranja"><div class="titulo">SUBDIRECCIÓN</br>GEOGRÁFICA</div>
<span>
<p>SUBDIRECCIÓN GEOGRÁFICA (SDGEO)</p>
<div class="texto">La Subdirección General, dirige, planifica, controla y evalúa las actividades de todas las Subdirecciones, Unidad de Cuartel y Funciones primarias, con la finalidad de lograr cumplir los objetivos del IGM.</div>
</span>
</a>
</div>
<div class="subdireccioningenieria">
<a class="btn btn-1 btn-1a css-tooltip-top color-naranja"><div class="titulo">SUBDIRECCIÓN</br>INGENIERÍA</div>
<span>
<p>SUBDIRECCIÓN INGENIERÍA (SDI)</p>
<div class="texto">La Subdirección de Ingeniería, proporciona la producción de los productos y servicios derivados de los procesos cartográfico, geodésico e investigaciones para mejorar los procesos productivos.<br><br> Su orgánica está compuesta por el Departamento de Investigación y Desarrollo, el Departamento Cartografico, el Departamento Geomático, el Departamento Geodésico y el Departamento de Informática.</div>
</span>
</a>
</div>
<div class="subdirecciongrafica">
<a class="btn btn-1 btn-1a css-tooltip-top color-naranja"><div class="titulo">SUB.PRODUCCIÓN</br>GRÁFICA</div>
<span>
<p>SUBDIRECCIÓN GRÁFICA (SDPG)</p>
<div class="texto">La Subdirección de Producción Gráfica, proporciona el servicio de impresión para productos derivados de los procesos productivos cartográfico y geocartográfico que generan la Subdirección de Ingeniería y la Subdirección Geográfica.<br><br>Su orgánica está compuesta por la Sección Pre prensa, la Sección Impresión offset, la Sección Impresión digital, la Sección Tipografía, la Sección Encuadernación y la Sección Corrección de prueba.</div>
</span>
</a>
<div>
<div class="subdireccioncomercial">
<a class="btn btn-1 btn-1a css-tooltip-left color-naranja"><div class="titulo">SUBDIRECCIÓN</br>COMERCIAL</div>
<span>
<p>SUBDIRECCIÓN COMERCIAL (SDC)</p>
<div class="texto">La Subdirección Comercial, realiza la comercialización y difusión de los productos y servicios derivados de los procesos cartográfico y geocartográfico, que el IGM ofrece a la comunidad. Su orgánica está compuesta por el Departamento de Ventas y el Departamento de Marketing.</div>
</span>
</a>
</div>
</div>
</body>
</html>
1 example of image:
