0

Estaba haciendo una página ocupando HTML y CSS, todo iba bien hasta que me di cuenta que no la página se distorsionaba al ir achicando / minimizando mi navegador. Estaba elaborando la página en una resolución de 1080p pero al ir minimizando las cosas pues la página se iba distorsionando. No sé si me doy a explicar pero quiero que al menos la página se quede tal cual como está originalmente aunque se achique o minimice un poco el navegador. Investigué un poco algo con Responsive o algo así pero no funcionó porque no es como quería hacerlo (vi que era para adaptarlo y conlleva mucho tiempo del cual no dispongo). Código utilizado:

*
{
    width: 100%;
    margin: 0;
    padding: 0;
    text-decoration: none;
}
body
{
    background: url(https://i.ibb.co/YWnTzhb/imagenfondo.png) no-repeat;
    background-position: center;
    background-size: cover;
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100%;
}
/*Menú de lado DIV CLASS="SIDEBAR"*/
.sidebar
{
    position: fixed;
    left: 0;
    width: 266px;
    height: 100%;
    background-color: black;
    transition: all .4s ease
}
.sidebar header
{
font-size: 22px;
color: white;
text-align: center;
line-height: 75px;
background-color: black;
user-select: none;
}
.sidebar ul a
{
    text-align: left;
    display: block;
    height: 100%;
    width: 100%;
    line-height: 75px;
    font-size: 17px;
    padding-left: 40px;
    color: white;
    box-sizing: border-box;
    border-top: 1px rgba(255,255,255,.1);
    border-bottom: 1px solid black;
    transition: .4s;
}
/*Hover's*/
ul li:hover a
{
color: #5d78ff;;
padding-left: 50px;
}
.sidebar ul a i
{
    margin: 15px;
}
/*Hover's*/
/*Check*/
#check
{
    display: none;
}
label #btn, label #cancel
{
    position: absolute;
    cursor: pointer;
    background: #042331;
    border-radius: 2px;
}
/*Check*/
/*Span*/
span
{
    padding: 10px;
    position: relative;

}
/*Span*/
/*Aquí se comienza a centrar todo el contenido*/
#content-base .container
{
    flex: 1;
    box-shadow:  -2px -2px 59px -16px rgb(63, 63, 63);
    padding: 8px;
    display: flex;
    flex-direction: column;
    width: 70%;
    height:100%;
    justify-content: center;
    align-content: center;
    background-color: rgba(0, 0, 0, 0.342);
    margin-left: auto;
    margin-right: auto;
    border-radius: 9px;
    background-position: center;
    background-size: cover;
    display: flex;
    flex-direction: column;
}
#content-base .container h2
{
    padding-top: 1rem;
    margin-top: 0px;
    top: 0;
    color: white;
    text-align: center;
    font-size: 1.7rem;
    font-family: 'Pangolin', cursive;
    text-shadow: black 0.1em 0.1em 0.2em;
    background-position: center;
    background-size: cover;

}
#content-base .container p
{
    font-size: 1.4rem;
    text-shadow: black 0.1em 0.1em 0.2em;
    justify-content: left;
    background-position: center;
    background-size: cover;
    display: flex;
    flex-direction: column;
    text-align: center;
    color: white
}
/*VIDEAZOS DEL 1 AL 3*/

/*Aquí se finaliza el centrado de contenido*/              
<!DOCTYPE html>
<html lang="en">
<head>    

   <!--ESTILO--><link rel="stylesheet" href="CSS/Style.css">
   <!--ESTILO--><link rel="stylesheet" href="FONT/fonts.css">
   <!--ESTILO--><link rel="shortcut icon" href="Multimedia/CHANGEME.png" type="image/x-icon">
   <!--ESTILO--><link href="https://fonts.googleapis.com/css2?family=Pangolin&display=swap" rel="stylesheet">


<!--______________________________________________________________________________________-->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mapokeño Youtube</title>
</head>
<body>
    <div class="sidebar">
        <header>Logo Mapokeño</header>
        <ul>
            <!--LISTAS ESTRUCTURA-->
            <li><a href="#"><span class="icon-home3"></span>Inicio de página</a></li>
            <li><a href="#"><span class="icon-coin-dollar"></span>Donaciones</a></li>
            <li><a href="#"><span class="icon-play"></span>Youtube</a></li>
            <li><a href="#"><span class="icon-google-drive"></span>Discord</a></li>
            <li><a href="#"><span class="icon-pushpin"></span>Servicios</a></li>
            <li><a href="#">Mis mods</a></li>
            <!--LISTAS ESTRUCTURA-->
        </ul>
    </div>
<!--_____________________________________________________________________________________________________-->
<div id="content-base"><!--Contenedor general-->
    <div class="container" style="height:100%"><!--Contenedor secundario-->
        <h2>MODS QUE UTILIZO</h2><br>
        <p>A continuación les muestro el cómo han ido evolucionando mis GTA abriendo paso a todos los aportes
        que he realizado para la comunidad de SA:MP, no es mucho pero es trabajo honesto. Seguramente seguiré
        subiendo aportes según como me lo pidan en los vídeos para que puedan disfrutarlos tanto como yo,
        por cierto, mi servidor sigue en línea por si gustan ingresar a probar o divertirse un poco. 54.39.125.4:7787;) 
        </p><br><br>
    </div><!--Final, contenedor secundario-->
</div><!--Final, contenedor general-->

</div>
<!--_____________________________________________________________________________________________________-->
</body>
</html>

1
  • puedes usar @media, también existen librerías como bootstrap que te pueden ser de ayuda para mantener el formato Commented el 26 jun. 2020 a las 7:02

1 respuesta 1

1

El problema es que en todo estás usando width: 100%, el contenedor de todo debe tener max-widht: 1080pxpara que al expandir la pantalla se quede todo como debe ser.

También debes aplicar un width mínimo al contenedor para que no se distorsione al llegar a pantallas muy pequeñas. Te recomiendo leer sobre media queries. Al principio puede ser muy confuso, pero es muy necesario para evitar que la página se distorsione al llegar a pantallas muy grandes o muy chicas.

Otra cosa, remueve el height: 100vh; del body. Cuando el contenido es muy grande, el height aumenta solo y por eso sale un scroll.

Si quieres evitar el responsive design por el tiempo que conlleva, investiga sobre Bootstrap, está hecho para que tu página sea responsive sin dedicarle mucho tiempo

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.