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>
@media
, también existen librerías como bootstrap que te pueden ser de ayuda para mantener el formato