Problemas al adaptar el porcentaje de la ventana en la pantalla

Whestt · 25 Jun 2022

Hola estoy aprendido como auto-didacta a hacer paginas web y tengo un problema en css cuando intento reducir el tamaño de la ventana de la pagina web, cuando reduzco el tamaño no se me quedan la imagenes fijas ni tampoco se adaptan al porcentaje al igual que el texto y otros elementos de la pagina...el tamaño de las 4 imagenes que aparacen son de; 2 imagenes de153x274 y las otras dos son una de 108x108 y la otra 200x200(la imagenes estan en px)si alguien me puede ayudar se lo agradeceria saludos.

Aqui dejo la configuracion html y css.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"content="IE=edge">
<meta name="viewport"content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" type="text/css" media="screen" href="style-FinalDownloads.css">
<link rel="stylesheet" type="text/css" media="screen" href="style-FinalDownloads-Menu.css">

<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Bree+Serif&display=swap" rel="stylesheet">

<title>BomberApp/Downloads</title>

<style type="text/css">
.boton_personalizado{
position: relative;

bottom: 230px;
text-decoration: none;
padding: 30px;
font-weight: 600;
font-size: 20px;
color: #ffffff;
background-color: #ff7200 ;
border-radius: 6px;
border: 2.5px solid black;
}
.boton_personalizado:hover{

background-color:#ffaf1c ;
}
</style>

</head>

<center><h2 class=" titulo-apli">Zoho Cliq</h2></center>
<p class="parrafo">
software de colaboración para equipos diseñado <br>
con el fin de aportar contexto a sus comunicaciones. <br>
Optimice su tiempo y recursos con esta herramienta</p><br>

<img class="imgCabecera" src="img-downloads/zoho cliq-9/zoho cliq-3.png">

<body>

<a class="link"><center><h1 >BomberApp</h1></center></a>

<a class="boton_personalizado" href="https://vinkula.com">Downloads</a>

<span class="boton-hamburguesa icon-menu" id="boton-hamburguesa"></span>
<nav class="menu" id="menu">
<lu>

<li class="opcion"><a href="/index-inicio.html"><b><h2>--Inicio--</h2></b></a></li>
<li class="opcion"><a href="/list-herramientas.html"><b><h2>--Herramienta--</h2></b></a></li>
<li class="opcion"><a href="/list-comunicacion.html"><b><h2>--Comunicacion--</h2></b></a></li>
<li class="opcion"><a href="/list-seccioniPhone.html"><b><h2>--Seccion iPhone--</h2></b></a></li>
<li class="opcion"><a href="/list-aplicacionespopulares.html"><b><h2>--A. Populares--</h2></b></a></li>
<li class="opcion"><a href="/list-juegos.html"><b><h2>--Juegos--</h2></b></a></li>
<li class="opcion"><a href="/list-productividad.html"><b><h2>--Productividad--</h2></b></a></li>
<li class="opcion"><a href="/list-almacenamiento.html"><b><h2>--Almacenamiento--</h2></b></a></li>
<li class="opcion"><a href="/list-internet.html"><b><h2>--Internet--</h2></b></a></li>
<li class="opcion"><a href="list-redes-sociales.html"><b><h2>--Redes Sociales--</h2></b></a></li>
<li class="opcion"><a href="/list-navegadores.html"><b><h2>--Navegadores--</h2></b></a></li>
<li class="opcion"><a href="/list-navegadoresygps.html"><b><h2>--Navegadores y GPS--</h2></b></a></li>
<li class="opcion"><a href="/list-tvmultimedia.html"><b><h2>--TV Multimedia--</h2></b></a></li>

</ul>
</nav>
</nav>
<script>
$burguerButton = document.getElementById('boton-hamburguesa');
$menu = document.getElementById('menu');

$burguerButton.addEventListener('click', menu);
$menu.addEventListener('click', menu);

function menu(){
$menu.classList.toggle('active');
$burguerButton.classList.toggle('icon-close');
}
</script>

<img class="fotoizquierda" src="img-downloads/zoho cliq-9/zoho cliq-1.png">

<img class="fotoderecha" src="img-downloads/zoho cliq-9/zoho cliq-2.png">

<div class="container">

<section class="titulo-footer"><h2 class="footer-title">BomberApp</h2></section>

<img class="imagen-fondo" src="bomber-gris-200-jpg.jpg">

<div class="line-1">

<div class="line-2"><a href="Formulario-contacto.html"><b><h3>Contacto</h3></b></a></div>

<div class="line-2"><b><h3>Sobre Nosotros</h3></b></div>

<il class="logo-2">

<b><h3>BomberApp © 2022</h3></b>

</il>

</div>

</body>
</html>

*/style-FinalDownloads-Menu.css/*

@font-face {
font-family: 'icomoon';
src: url('../fonts/icomoon.eot?6jay0f ');
src: url('../fonts/icomoon.eot?6jay0f#iefix') format('embedded-opentype'),
url('../fonts/icomoon.ttf?6jay0f') format('truetype'),
url('../fonts/icomoon.woff?6jay0f') format('woff'),
url('../fonts/icomoon.svg?6jay0f#icomoon ') format('svg');
font-weight: normal;
font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
font-family: 'icomoon' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.icon-menu:before {
content: "\e9bd";
}
.icon-close:before {
content: "\ea0f";
}

/**************************** Menu hamburguesa ***************************/

/* atributon boton */

.boton-hamburguesa{
margin: 10px;
width: 60px;
height: 40px;
line-height: 40px;
border-radius: 50%;
left: 0;
top: 0;
text-align: center;
display: inline-block;
position: relative;
left:-150px; /*posicion boton izquierda derecha*/
/* altura posicion boton */
top:-600px;
z-index: 3;
cursor: pointer;
background-color: #1f81c0 ;
}

.menu{
position: absolute;
text-align: center;
top: 0;
right: 5px;
z-index: 2;
/* anchura tableto menu */
width: 20%;
margin-top: 30px;
left: -100%;
transition: .3s;

}
.menu.active{
left: 0;
}

.menu ul{
margin-top: 60px;
padding: 10px;
}

.menu li{
border: 1px solid #010101;
list-style: none;
display: block;
padding: 18px;
cursor: pointer;
background: rgba(92, 173, 201, .5);
}

.menu li:hover{
background: rgb(26, 53, 77);
color: white;
}

*/style-FinalDownloads.css/*

body{background-color: #C8D8D9 ;
padding:250px;
border: 20px solid #eee;
border-radius: 10px;
}
a{background:transparent;
color: black;
text-decoration: none;
}

.link{position:relative;
left:20px;
bottom: 450px;
font-family:'Pacifico', cursive;
text-align:center;
font-size: 40px;
text-decoration: none;
text-align:center;}

.titulo-apli{position:absolute;
border-style: double ;
border: 3.5px solid gray;
top:250px;
height: 55px;
text-align: center;
font-family: 'Bree Serif', serif;
background: White;
top:220px;
left: 460px;
width: 500px;
border-radius: 10px;
}
.parrafo{position: absolute;
overflow:visible;
text-align: center;
height: 30px;
font-family: 'Bree Serif', serif;
top:300px;
left:480px;
background:#dfdfdf ;
border: 2.5px solid gray;
border-radius: 10px;
padding: 60px;
padding-top: 0px;
}
.imgCabecera{position:relative;
left:20px;
top:-20px;
border: 3.5px #606060;
border-radius: 10px;
border-style: solid;
}
.fotoizquierda{position:absolute;
margin: auto;
bottom:-120px;
right: 700px;
border-style:solid;
border-radius: 10px;
border:3.5px solid #606060;
}
.fotoderecha{position: absolute;
bottom: -120px;
right: 410px;
margin-left: 70px;
border: 3.5px #606060;
border-radius: 10px;
border-style: solid;
}
.titulo-footer{position:relative;
margin-bottom: 100px;
bottom: 150px;
font-size: 40px;
font-family:'Pacifico', cursive;
/* posicion titulo inferior */
margin:180px;
margin-bottom: 200px;
left:50px;
}

.line-1{position: absolute;
left:500px;
top:1150px;
}

.line-1 .line-2 {
text-align: center;
float: left;
padding: 25px;
margin-left: 25px;
background-color: transparent;
font-family: 'Bree Serif', serif;
}

.logo-2{font-family: 'Bree Serif', serif;
position: absolute;
bottom: -50px;
left: 80px;
word-spacing: 20px;
}
.imagen-fondo{position:absolute;
left:580px;
bottom: -530px;
}
.container{

bottom: 300px;
border: 17px solid #606060;
border-style: double;
border-radius: 10px;
width: auto;
height: 600px;

}

Anunciante

Accede o regístrate

Problemas al adaptar el porcentaje de la ventana en la pantalla

Whestt Nuevo usuario

Anunciante

Accede o regístrate

Problemas al adaptar el porcentaje de la ventana en la pantalla

Whestt Nuevo usuario

Anunciante

Búsquedas útiles