Estimados, tengo inconvenientes para ajustar el footer para mobile en mi código https://arielleon305.github.io/encriptador_de_texto.io/
Cuando lo abro desde el celular, me figura incorrecto....si bien he probado varias configuraciones desde el CSS no logro ajustarlo correctamente.
Desde ya, muchas gracias por su colaboración....
Hola Ricardo, espero que estés bien!
Comparta su código en su totalidad con nosotros por favor... Si tiene alguna pregunta sobre el contenido del curso, estamos aquí para ayudarlo. ¡Sigue practicando! ¡Vamos juntos!
hola @Ricardo!
Seguramente estas teniendo un problema con el responsive . Intentaste modificando los MediaQuerys? Una forma practica de ir revisando como quedara en distintas resoluciones es abriendo desde tu navegador, el inspector (boton del mouse derecho y apretar sobre inspeccionar o sino apretando la tecla F12) y en la punta superior izquierda tenes un apartado para configurar distintas resoluciones de display y ahi podes poner la configuracion de pixeles de tu celular y deberia imitar como se veria. Sino tambien existen diversos programas que podes descargarte gratuitamente desde la web que hacen lo mismo de manera local. Te dejo link de una pagina que tiene descargas por si te interesa. https://www.webdesignerdepot.com/2017/10/7-free-tools-for-testing-responsive-layouts/ Saludos.
Hola, gracias por sus respuestas!
Agregue el MediaQuery para dispositivos de hasta 480px, pero al momento de ajustar el footer, no se visualiza correctamente...
Les dejo el repo con el códgo completo: https://github.com/arielleon305/encriptador_de_texto.io (si es necesario copio el codigo completamente en el tópico)
index.html:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content= "width=device-width">
<title>Encriptador de Texto</title>
<link rel="stylesheet" href="css/reset.css"> <!-- primero se ubica el reset -->
<link rel="stylesheet" href="css/style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap" rel="stylesheet">
</head>
<body>
<header>
<div class="cabecera">
<img src="img/Vector.png" alt="logo Alura" class="logo">
<h1 class="titulo">ENCRIPTADOR DE TEXTO</h1>
</header>
<main>
<section class="principal">
<div class="cajas">
<h1>Ingrese su mensaje</h1>
<p>Recuerde no ingresar mayúculas, acentos, ni caracteres especiales.</p>
<form id="ingresar-texto">
<textarea name="" id="mensaje" cols="60" rows="6" class="caja-texto" placeholder="Ingrese su texto aquí" required></textarea>
<input type="button" id="encriptar" value="Encriptar" class="boton">
<input type="button" id="desencriptar" value="Desencriptar" class="boton">
</form>
</div>
<div class="cajas">
<h1>Mensaje Traducido:</h1>
<div id="texto-traducido">
<input class="caja-traducido" type="text" id="traducido" readonly="readonly" placeholder="Texto traducido"></input>
<input type="button" value="Copiar" id="copiar" class="boton">
</div>
</div>
</section>
</main>
<footer>
<p class="copyright">© Copyright - Diseño Ariel Martins - 2022.</p>
</footer>
<script src="js/main.js"></script>
</body>
CSS:
body{
background-color: #E5E5E5;
font-family: 'Montserrat', sans-serif;
}
.main{
align-items: center;
}
.cabecera{
width: 940px;
text-align: center;
font-size: 2em;
margin: 0 auto;
}
.logo{
position: absolute;
left: 84px;
right: 0%;
top: 20px;
bottom: 0%;
}
.titulo{
display: inline-block;
margin: 35px auto;
padding: 0;
}
.principal{
text-align: center;
vertical-align: center;
margin: 20px auto;
}
.cajas{
display: inline-block;
margin: 0 auto;
padding: 10px 10px;
text-align: center;
}
.cajas h1{
font-size: 20px;
margin: 10px auto;
font-weight: bold;
}
.cajas p{
margin: 1em auto;
}
form textarea, #traducido{
display: block;
margin: 20px auto;
border: 0;
border-radius: 20px;
padding: 2%;
border: #def;
}
.boton{
width: 40%;
padding: 15px 0;
font-size: 18px;
font-weight: bold;
background: #D8DFE8;
border-radius: 24px;
border: 1px solid #0A3871;
transition: 0.2s all;
cursor: pointer;
}
.boton:hover{
width: 40%;
padding: 15px 0;
font-size: 18px;
font-weight: bold;
background: #0A3871;
border-radius: 24px;
border: 1px solid #D8DFE8;
cursor: pointer;
}
.caja-traducido {
border: none;
width: 500px;
height: 90px;
margin: 0 0 15px;
}
footer{
background-color: #D8DFE8;
height: 100px;
bottom: 0;
position: absolute;
width: 100%;
}
footer p{
text-align: center;
vertical-align: middle;
padding: 40px;
}
@media screen and (max-width:480px){
.cabecera, .titulo, .principal, .cajas{
margin: 0 auto;
width: auto;
}
.logo{
position: relative;
left: 290px;
top: 45px;
bottom: 0%;
}
footer{
width: auto;
margin-bottom: 0;
background-color: #D8DFE8;
}
footer p{
padding: 25px 0;
}
}Desde ya, muchas gracias por su ayuda...