I hope and they are well, what happens is that in my design when it is on the normal screen, if it looks "good", but at the moment of doing it responsive, with media queries the elements are removed, I put the design as see normally:
And this is when I do it responsively:
The detail here, is that the numbers are put to the right, so I want the whole picture to remain fixed at the moment of becoming responsive.
Here is my html:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Simulador Pensión</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1" />
<meta name="format-detection" content="telephone=no"/>
<script src="../js/jquery_v1.11.3.js"></script>
<!--<script type="text/javascript" src="/aplicativos/simulador-pensiones/globos/jquery-1.9.1.min.js"></script>-->
<!--<script type="text/javascript" src="/aplicativos/simulador-pensiones/seleccion.js"></script>-->
<script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="../js/seleccion.js"></script>
<!--<script src="https://code.jquery.com/jquery-1.10.2.js"></script>-->
<!--Para QA-->
<!-- <link rel="stylesheet" href="css/style_MD_cta.css">-->
<!--fin-->
<!--Ruta Mi local-->
<link rel="stylesheet" href="../css/style_MD_cta.css">
<script type="text/javascript">
//Declaración de Variables Globales
//******************************************************
//CAMBIAR ESTAS CANTIDADES ANUALMENTE //se cambió 25-Marzo-14
var FIJO1 = 2046.73;//Salario Actual
var FIJO2 = 2343.38;//PMG Actual
var FIJO3 = 2253.85;//PMG Anterior
var a = 0, b = 0, r = 0, c = 0;
//******************************************************
var pension = '<%=Integer.parseInt((request.getParameter("pension") == null) ? "0" : request.getParameter("pension"))%>';
var string_pension;
var string_seguro = "";
if (pension == "1") {
string_pension = "Invalidez";
} else if (pension == "2") {
string_pension = "Incapacidad";
} else if (pension == "3") {
string_pension = "Viudez y Orfandad";
} else if (pension == "4") {
string_pension = "Viudez";
} else if (pension == "5") {
string_pension = "Orfandad";
} else if (pension == "6") {
string_pension = "Ascendencia";
} else {
string_pension = "";
}
var seg = '<%=(request.getParameter("seguro") == null) ? "0" : request.getParameter("seguro")%>';
if (seg = "1") {
string_seguro = "invalidez";
} else if (seg = "2") {
string_seguro = "riesgos de trabajo";
} else if (seg = "3") {
string_pseguro = "Viudez y Orfandad";
}
$(function () {
$(".SelectPenMinGara")
.change(function () {
if ($('select option:selected[name=valorpension]:selected').val() == 1) {
$('#PMG').val(FIJO2);
} else if ($('select option:selected[name=valorpension]:selected').val() == 2)
$('#PMG').val(FIJO3);
});
/////***** Datos paso 2 ******
var HON = '<%=request.getParameter("HON")%>';
document.getElementById("HON").value = HON;
var HOS = '<%=request.getParameter("HOS")%>';
document.getElementById("HOS").value = HOS;
var HOD = '<%=request.getParameter("HOD")%>';
document.getElementById("HOD").value = HOD;
var ASC = '<%=request.getParameter("ASC")%>';
document.getElementById("ASC").value = ASC;
var esposa = '<%=(request.getParameter("esposa") == null) ? "false" : request.getParameter("esposa")%>';
document.getElementById("esposa").value = esposa;
// /****** Datos del index ******/
var seguro = '<%=Integer.parseInt((request.getParameter("seguro") == null) ? "0" : request.getParameter("seguro"))%>';
document.getElementById("seguro").value = seguro;
var pension = '<%=Integer.parseInt((request.getParameter("pension") == null) ? "0" : request.getParameter("pension"))%>';
document.getElementById("pension").value = pension;
//***** Datos paso3
var SP = '<%=Double.parseDouble((request.getParameter("SP") == null) ? "0" : request.getParameter("SP"))%>';
document.getElementById("SP").value = SP;
var AAS = '<%=Integer.parseInt((request.getParameter("AAS") == null) ? "0" : request.getParameter("AAS"))%>';
document.getElementById("AAS").value = AAS;
var PDI = '<%=Integer.parseInt((request.getParameter("PDI") == null) ? "0" : request.getParameter("PDI"))%>';
document.getElementById("PDI").value = PDI;
//inicio
if (SP > 0 || seguro == 3) {
var tope;
a = 0;
b = 0;
r = 0;
c = 0;
//selecciona el valor del tope
//if (!(seguro==1))
// tope=0;
//else
tope = SP;
//-------------------------------------
c = ((FIJO1 * 12) / 365) * 25;
b = SP * 365 / 12;
//verifica que no se exceda el tope
if (tope <= c) {
//asigna el valor de la Cuantia Basica
if (seguro == 1) {
b = b * 0.35;
} else {
b = b * 0.70;
}
if (seguro == 3) {
window.document.getElementById("CB").value = outputMoney(FIJO2);
} else {
window.document.getElementById("CB").value = outputMoney(b);
}
//datos de a y b para cada combinación
//verficar el TdS
if (seguro == 1) {
//Vericar para cada TdP
if (pension == 1) {
string_pension = "Invalidez";
//if (forma.TdSIV.checked && forma.TdPInvalidez.checked) {
r = (HON * .1) + (AAS / 100) + 1;
if (esposa == "true") {
r = r + 0.15;
}
r = Max(FIJO2, r * b);
a = Max(FIJO2, b);
}
//-------------------------------------
else if (pension == 3) {
string_pension = "Viudez y Orfandad";
//else if (forma.TdSIV.checked && forma.TdPVO.checked) {
r = 0.9 + (HOS * 0.2) + (HOD * 0.3);
if (r > 1) {
r = Max(FIJO2, b);
} else
r = Max(FIJO2, b) * r;
a = r;
}
//-------------------------------------
else if (pension == 4) {
string_pension = "Viudez";
//else if (forma.TdSIV.checked && forma.TdPVI.checked) {
r = Max(FIJO2, b) * 0.9;
a = r;
}
//-------------------------------------
else if (pension == 5) {
string_pension = "Orfandad";
//else if (forma.TdSIV.checked && forma.TdPOR.checked) {
r = HOS * 0.2 + HOD * 0.3;
if (r > 1) {
a = Max(FIJO2, b);
r = a;
} else {
r = Max(FIJO2, b) * r;
a = r;
}
}
//-------------------------------------
else if (pension == 6) {
string_pension = "Ascendencia";
//else if (forma.TdSIV.checked && forma.TdPASC.checked) {
r = ASC * 0.2;
a = Max(FIJO2, b) * r;
r = a;
}
}//fin de verificar TdSIV
else if (seguro == 2) {
//-------------------------------------
if (pension == 2) {
string_pension = "Incapacidad";
//else if (forma.TdSRT.checked && forma.TdPIncapacidad.checked) {
r = (PDI / 100) * Max(b, FIJO2);
if (PDI > 50) {
a = r * 0.5;
}
}
//-------------------------------------
else if (pension == 3) {
string_pension = "Viudez y Orfandad";
//else if (forma.TdSRT.checked && forma.TdPVO.checked) {
r = Max(0.4, ((0.9 * FIJO2) / Max(FIJO2, b)))
+ (HOS * 0.2) + (HOD * 0.3);
if (r > 1) {
a = ((Max(0.4, ((0.9 * FIJO2) / Max(FIJO2, b))) + HOD * 0.3) / r)
* 0.5 * Max(FIJO2, b);
r = Max(FIJO2, b);
} else {
a = (Max(0.4, ((0.9 * FIJO2) / Max(FIJO2, b))) + HOD * 0.3)
* 0.5 * Max(FIJO2, b);
r = Max(FIJO2, b) * r;
}
}
//-------------------------------------
else if (pension == 4) {
//else if (forma.TdSRT.checked && forma.TdPVI.checked) {
r = Max(0.4, ((0.9 * FIJO2) / Max(FIJO2, b)))
* Max(FIJO2, b);
a = r * 0.5;
}
//-------------------------------------
else if (pension == 5) {
//else if (forma.TdSRT.checked && forma.TdPOR.checked) {
r = HOS * 0.2 + HOD * 0.3;
if (r > 1) {
a = ((HOD * 0.3) / r) * Max(FIJO2, b) * 0.5;
r = Max(FIJO2, b);
} else {
r = Max(FIJO2, b) * r;
a = HOD * 0.3 * Max(FIJO2, b) * 0.5;
}
}
//-------------------------------------
else if (pension == 6) {
//else if (forma.TdSRT.checked && forma.TdPASC.checked) {
r = ASC * 0.2;
a = Max(FIJO2, b) * r * 0.5;
r = Max(FIJO2, b) * r;
}
}//fin TdSRT
else if (seguro == 3) {
//-------------------------------------
if (pension == 3) {
r = 0.9 + HOS * 0.2 + HOD * 0.3;
if (r > 1) {
r = FIJO2;
a = 0;
} else {
r = FIJO2 * r;
a = 0;
}
}
//-------------------------------------
else if (pension == 4) {
r = FIJO2 * 0.9;
a = 0;
}
//-------------------------------------
else if (pension == 5) {
r = HOS * 0.2 + HOD * 0.3;
if (r > 1) {
a = FIJO2;
r = 0;
} else {
r = FIJO2 * r;
a = 0;
}
}
//-------------------------------------
else if (pension == 6) {
r = ASC * 0.2;
a = 0;
r = FIJO2 * r;
}
}//fin TdSRCV
//-------------------------------------
if (b < FIJO2) {
window.document.getElementById("CB").value = outputMoney(FIJO2);
}
window.document.getElementById("PM").value = outputMoney(r);
// setPaymentAmount(($('#PM').val()).replace(",", ""));
window.document.getElementById("AG").value = outputMoney(a);
} else {
alert("El Salario Pensionable debe ser menor a 25 veces el salario mínimo vigente.");
//nuevo Cambio
// event.preventDefault();
window.location = 'paso-03.jsp?pension=' + pension + '&seguro=' + seguro;
//llamar a reset valores de abajo....
//reset sp
}//fin checartope
}//fin if sp>0
// else {
// alert("El Salario Pensionable no puede ser 0");
//
// }
});
</script>
</head>
<body>
<div class="container1">
<h1>Simulador Pensión</h1>
<h4>Resultado:</h4>
<h3>Calculo de Pensión por Montos Solicitados.</h3>
<form name="paso04" method="post" action="">
<input type="hidden" name="HON" id="HON" value="">
<input type="hidden" name="HOS" id="HOS" value="">
<input type="hidden" name="HOD" id="HOD" value="">
<input type="hidden" name="ASC" id="ASC" value="">
<input type="hidden" name="esposa" id="esposa" value="">
<input type="hidden" name="seguro" id="seguro" value="">
<input type="hidden" name="pension" id="pension" value="">
<input type="hidden" name="SP" id="SP" value="">
<input type="hidden" name="AAS" id="AAS" value="">
<input type="hidden" name="PDI" id="PDI" value="">
<div class="botonera1">
<div id="bt_div" class="derecha">
<div class="group">
<select class=" Caja_txt_246 selectArrow" tabindex="9">
<option disabled="disabled" class="optionDisable">Selecciona una opción</option>
<option name="valorpension" id="actual" value="1">Actual</option>
<option name="valorpension" id="anterior" value="2">Anterior</option>
</select>
<label class="combo">Pensión mínima garantizada:</label>
</div>
</div>
</div>
<div class="botonera">
<div id="bt_div" class="derecha">
<div class="group">
<input name="PMG" type="text" class="inputsChicos" id="PMG" value="" readonly="readonly">
<label class="">Pensión Minima:</label>
<label class="">$</label>
</div>
</div>
</div>
<div class="botonera">
<div id="bt_div" class="derecha">
<div class="group">
<input class="inputsChicos" name="CB" type="text" id="CB" value="" readonly="readonly" >
<label class="labelsFijos">Cuantía Básica:</label>
<label class="labelsPesos1">$</label>
</div>
</div>
</div>
<div class="botonera">
<div id="bt_div" class="derecha">
<div class="group">
<input class="inputsChicos" name="PM" type="text" id="PM" value="" readonly="readonly">
<label class="labelsFijos">Pensión mensual:</label>
<label class="labelsPesos1">$</label>
</div>
</div>
</div>
<div class="botonera">
<div id="bt_div" class="derecha">
<div class="group">
<input class="inputsChicos" name="AG" type="text" id="AG" value="" readonly="readonly"/>
<label class="labelsFijos">Aguinaldo:</label>
<label class="labelsPesos1">$</label>
</div>
</div>
</div>
<div class="botonera">
<div id="bt_div" class="derecha exiit">
<a href="../index.html" target="_top" class="exit">Regresar</a>
</div>
<!-- <div id="bt_div" class="izquierda">
<button href="index.jsp" target="_top" type="submit" id="loginButton">Regresar</button>
</div>-->
</div>
</form>
</div>
</body>
</html>
And this is my css from the media queries:
@media screen and (max-width: 945px) {
/* .contenidoTotal{
width: 100%;
}*/
/* .SelectPenMinGara{
width: 100%;
}*/
/*.botonera1{
}*/
.enviar,
.regis {
position: relative;
}
select {
width: 100%
}
.botonera {
width: 100%
}
.botonera1 {
width: 100%;
}
.enviar,
.regis {
width: 100%;
display: block;
}
#loginButton {
float: none;
width: 100%
}
.regis {
top: 70px;
text-align: center
}
.enviar {
top: -25px
}
input, textarea{
width: 100%;
}
.botonera {
display: block;
padding-top: 16px;
}
.derecha {
width: 100%;
display: block;
margin-bottom: 16px;
}
.exiit.derecha{
text-align: center;
display: inline-block;
}
I hope and you can guide me, the strange thing is that it distorts me since I do not have any rule in the rest of the labels and inputs classes :( most of all what I need is that all the elements are traversed by the body without being distorted.
Note: I have this code, but the difference with mine is that they did not use inputs, and I do:
<body>
<div class="container">
<h1>Simulador Pensión</h1>
<h2>Resultado:</h2>
<h3>Calculo de Pensión por Montos Solicitados</h3>
</div>
<div class="botonera" style="width: 368px;">
<div class="group">
<select name="Pension_Min" id="Pension_Min">
<option selected="selected" value="$<%=formateador.format(FIJO2)%>">Actual</option>
<option value="$<%=formateador.format(FIJO3)%>">Anterior</option>
</select>
<label class="combo">Ascendientes</label>
</div>
<p class="cond Pension_Min"></p>
</div>
<div class="botonera" style="width: 368px;">
<div id="bt_div" class="derecha"><p class="tit">Pensión mínima:</p></div>
<div id="bt_div" class="izquierda"><p class="monto_tit variacion">$<%=formateador.format(FIJO2)%></p></div>
</div>
<div class="botonera" style="width: 368px; padding-top: 16px;">
<div id="bt_div" class="derecha"><p class="tit">Cuantáa Básica:</p></div>
<div id="bt_div" class="izquierda"><p class="monto_tit">$<%=Cuenta_Basica %></p></div>
</div>
<div class="botonera" style="width: 368px; padding-top: 16px;">
<div id="bt_div" class="derecha"><p class="tit">Pensión mensual:</p></div>
<div id="bt_div" class="izquierda"><p class="monto_tit">$<%=PensioMin%></p></div>
</div>
<div class="botonera" style="width: 368px; padding-top: 16px;">
<div id="bt_div" class="derecha"><p class="tit">Aguinaldo:</p></div>
<div id="bt_div" class="izquierda"><p class="monto_tit">$<%=Aguinaldo%></p></div>
</div>
<div class="botonera" style="padding-top: 112px;">
<div id="bt_div" class="derecha">
<a href="index.jsp" target="_top" class="return">Regresar</a>
</div>
</div>
</body>